blocks|key|2502135|text|当调用this.setState时，新状态不是直接设置的，React会将其置于挂起状态，通过调用this.state可以返回旧状态。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2502136|这是因为React可能会批量处理您的状态更新，因此无法保证this.setState是同步的。|2502137|您要做的是在componentDidUpdate、componentWillUpdate中调用this.findByName()，或者根据您的用例通过回调将其作为第二个参数提供给this.setState。请注意，直到您的调用传递并且组件重新呈现自身之后，才会触发对this.setState的回调。|2502138|此外，在您的示例中，您可以传递一个函数do+this.setState来提高可读性，而不是进行变量跳跃。|2502139|this.setState(function+(prevState,+currentProps)+{
++++return+{page:+prevState.page+%2B+1}
},+this.findByName);|code-block|syntax|javascript|2502140|entityMap^0|3|D|1C|A|0|T|D|0|6|I|P|J|1B|H|2H|D|3P|D|0|M|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$]]

When calling <code>this.setState</code> the new state isn't set directly, React puts it in a pending state which by calling <code>this.state</code> can return the old state.

This is because React might batch your state updates and therefore offers no guarantee that <code>this.setState</code> is synchronous.

What you want to do is called <code>this.findByName()</code> within <code>componentDidUpdate</code>, <code>componentWillUpdate</code> or through the callback offered as a second argument to <code>this.setState</code> depending on your use case. Note that the callback to <code>this.setState</code> won't be fired until after your call has passed and the component has re-rendered itself.

Furthermore in your case you could pass a function do <code>this.setState</code> instead of doing a variable dance to increase readability.

<pre><code>this.setState(function (prevState, currentProps) {
 return {page: prevState.page + 1}
}, this.findByName);
</code></pre>

blocks|key|2712052|text|this.state不会立即更新，因此setState是异步的。对您的困境的简短回答是使用回调(setState的第二个参数)，该回调在内部状态更新后调用。例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2712053|this.setState({page:+page},+function+stateUpdateComplete()+{
++++console.log(this.state.page)
++++this.findByName();
}.bind(this));|code-block|syntax|javascript|2712054|更长的答案是，在您调用setState之后，将调用三个函数(有关每个https://facebook.github.io/react/docs/component-specs.html的更多详细信息，请参阅此处)：|2712055|2712056|shouldComponentUpdate这使您可以检查以前的状态和新的状态，以确定组件是否应该自我更新。如果返回false，则以下函数将不会被执行(尽管在component)|unordered-list-item|2712057|componentWillUpdate中仍会更新，但这使您有机会在内部设置新状态之前运行任何代码，并且呈现在组件“functions.|2712058|componentDidUpdate”和“”之间发生这种情况)这使您有机会在设置了新状态并且组件已重新呈现其自身之后运行任何代码|BOLD|2712059|2712060|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/component-specs.html^0|0|A|J|8|1C|8|0|0|B|8|Y|1M|0|0|0|0|L|0|0|J|0|0|I|L|17|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|M|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|P|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|S|3|T|5|P|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|U]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<code>setState</code> is asynchronous in that <code>this.state</code> will not be updated right away. The short answer to your quandary is use the callback (the second parameter to <code>setState</code>) which is invoked after the internal state is been updated. For example

<pre><code>this.setState({page: page}, function stateUpdateComplete() {
 console.log(this.state.page)
 this.findByName();
}.bind(this));
</code></pre>

The longer answer is that after you call <code>setState</code>, three functions are called (see here for more details about each <a href="https://facebook.github.io/react/docs/component-specs.html" rel="noreferrer">https://facebook.github.io/react/docs/component-specs.html</a>):

<ul>
<li><code>shouldComponentUpdate</code> this allows you to inspect the previous and new state to determine whether the component should update itself. If you return false, the following functions are not executed (although the <code>this.state</code> will still be updated within your component)</li>
<li><code>componentWillUpdate</code> this gives you a chance to run any code before the new state is set internally and rendering happens</li>
<li><code>render</code> this happens between the component "will" and "did" functions.</li>
<li><code>componentDidUpdate</code> this gives you a chance to run any code after the new state is set and the component has re-rendered itself</li>
</ul>

blocks|key|2502232|text|使用无名函数，可以用更短的格式编写此代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2502233|myReactClassFunction+=+(param)+=>+{
++this.setState({
++++key:+value,
++},
++()+=>+this.myClassFunction());
}|code-block|syntax|javascript|2502234|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using nameless functions this code can be written in a shorter format.

<pre><code>myReactClassFunction = (param) =&gt; {
 this.setState({
 key: value,
 },
 () =&gt; this.myClassFunction());
}
</code></pre>

I'm trying to use reactjs to update a state, and once it is updated fire an ajax call requesting a new page. Just before the ajax call fires an offset variable is set: <code>var offset = this.state.npp * this.state.page;</code> However I find after clickNextPage() is fired, the value of this.state.page is not updated. 

I fundamentally do not understand what is happening here, this appears to be a race condition, because I watch the state change on my render() function with {this.state.page}. 

How can I ensure my this.state.page is updated, and then fire findByName()? 

<pre><code> clickNextPage: function(event){
 console.log("clicked happend")
 page = this.state.page;
 console.log(page)
 page += 1
 console.log(page)
 this.setState({page: page});
 console.log(this.state.page)
 this.findByName()
 },
</code></pre>

JS Console:

<pre><code>clicked happend
0
1
0
</code></pre>

How can I ensure a reactjs state is updated, and then call a function?

我正在尝试使用reactjs来更新状态，一旦状态更新，就会触发一个ajax调用，请求一个新页面。就在触发ajax调用之前，设置了一个偏移量变量：var offset = this.state.npp * this.state.page;然而，我发现在触发clickNextPage()之后，this.state.page...

问如何确保reactjs状态更新，然后调用函数？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何确保reactjs状态更新，然后调用函数？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何确保reactjs状态更新，然后调用函数？
EN