blocks|key|4403054|text|您应该调用第二个函数作为setState的回调，因为setState是异步发生的。类似于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403055|this.setState({pencil:!this.state.pencil},+myFunction)|code-block|syntax|javascript|4403056|然而，在你的例子中，因为你想用一个参数来调用这个函数，所以你必须更有创造性，也许可以创建你自己的函数来调用props中的函数：|4403057|myFunction+=+()+=>+{
++this.props.updateItem(this.state)
}|4403058|将这些结合在一起，它应该会起作用。|4403059|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You should invoke your second function as a callback to setState, as setState happens asynchronously. Something like:

<pre><code>this.setState({pencil:!this.state.pencil}, myFunction)
</code></pre>

However in your case since you want that function called with a parameter you're going to have to get a bit more creative, and perhaps create your own function that calls the function in the props:

<pre><code>myFunction = () =&gt; {
 this.props.updateItem(this.state)
}
</code></pre>

Combine those together and it should work.

blocks|key|4403087|text|由于各种原因(主要是性能)，在React中调用setState()是异步的。在幕后，React会将对setState()的多个调用批处理成一个状态突变，然后重新呈现组件一次，而不是为每个状态变化重新呈现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4403088|幸运的是，解决方案相当简单--+setState接受一个回调参数：|4403089|checkPencil:+()+=>+{
+++this.setState(previousState+=>+({
++++++pencil:+!previousState.pencil,
+++}),+()+=>+{
++++++this.props.updateItem(this.state);
+++});
}|code-block|syntax|javascript|4403090|entityMap^0|N|A|1E|A|0|G|8|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

Calling <code>setState()</code> in React is asynchronous, for various reasons (mainly performance). Under the covers React will batch multiple calls to <code>setState()</code> into a single state mutation, and then re-render the component a single time, rather than re-rendering for every state change.
Fortunately, the solution is rather simple - <code>setState</code> accepts a callback parameter:
<pre class="lang-js prettyprint-override"><code>checkPencil: () =&gt; {
 this.setState(previousState =&gt; ({
 pencil: !previousState.pencil,
 }), () =&gt; {
 this.props.updateItem(this.state);
 });
}
</code></pre>

blocks|key|4403259|text|我使用了rossipedia和Ben+Hare的建议，并执行了以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403260|checkPencil(){
+++this.setState({
++++++pencil:!this.state.pencil,
+++},+this.updatingItem);+
}

updatingItem(){
++++this.props.updateItem(this.state)
}|code-block|syntax|javascript|4403261|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|$]]

I used both rossipedia's and Ben Hare's suggestions and did the following: 

<pre><code>checkPencil(){
 this.setState({
 pencil:!this.state.pencil,
 }, this.updatingItem); 
}

updatingItem(){
 this.props.updateItem(this.state)
}
</code></pre>

blocks|key|4403118|text|对于如何解决眼前的问题，Ben有一个很好的答案，但我也建议避免重复状态|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403119|如果状态处于redux状态，则复选框应从属性或存储区读取其自身的状态，而不是同时跟踪其自身组件和全局存储区中的检查状态|4403120|这样做：|4403121|
++++<input
++++++++type="checkbox"
++++++++name="area"+checked={this.props.isChecked}
++++++++onChange={this.props.onChange}
++++/>
++++Writing+Item
|code-block|syntax|javascript|4403122|一般的规则是，如果你发现一个状态在多个地方被需要，把它提升到一个共同的父类(并不总是redux)，以保持只有一个单一的真理源|4403123|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Ben has a great answer for how to solve the immediate issue, however I would also advise to avoid duplicating state 

If a state is in redux, your checkbox should be reading its own state from a prop or store instead of keeping track of the check state in both its own component and the global store

Do something like this:

<pre><code>&lt;p&gt;
 &lt;input
 type="checkbox"
 name="area" checked={this.props.isChecked}
 onChange={this.props.onChange}
 /&gt;
 Writing Item
&lt;/p&gt;
</code></pre>

The general rule is that if you find a state being needed in multiple places, hoist it up to a common parent (not always redux) to maintain only having a single source of truth

blocks|key|4403279|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403280|this.setState({inputvalue:+e.target.value},+function+()+{
++++console.log(this.state.inputvalue);
++++this.showInputError(inputs[0].name);
});+|code-block|syntax|javascript|4403281|用于验证是否使用任何表单的showInputError函数|4403282|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

try this 

<pre><code>this.setState({inputvalue: e.target.value}, function () {
 console.log(this.state.inputvalue);
 this.showInputError(inputs[0].name);
}); 
</code></pre>

showInputError function for validation if using any forms

blocks|key|4403308|text|首先设置你的值。之后继续你的工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403309|this.setState({inputvalue:+e.target.value},+function+()+{
++++this._handleSubmit();
});+

_handleSubmit()+{
+++console.log(this.state.inputvalue);
+++//Do+your+action
}|code-block|syntax|javascript|4403310|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|$]]

First set your value. after proceed your works.

<pre><code>this.setState({inputvalue: e.target.value}, function () {
 this._handleSubmit();
}); 

_handleSubmit() {
 console.log(this.state.inputvalue);
 //Do your action
}
</code></pre>

blocks|key|4403163|text|如上所述，setState()本质上是异步的。我简单地使用async+await解决了这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4403164|这里有一个引用的例子：|4403165|continue+=+async+(e)+=>+{
++++++++e.preventDefault();
++++++++const+{+values+}+=+this.props;
++++++++await+this.setState({
++++++++++++errors:+{}
++++++++});
++++++++const+emailValidationRegex+=+/%5E(([%5E<>()\[\]\.,;:\s@\"]%2B(\.[%5E<>()\[\]\.,;:\s@\"]%2B)*)%7C(\".%2B\"))@(([%5E<>()[\]\.,;:\s@\"]%2B\.)%2B[%5E<>()[\]\.,;:\s@\"]{2,})$/i;
++++++++if(!emailValidationRegex.test(values.email)){
++++++++++++await+this.setState((state)+=>+({
++++++++++++++++errors:+{
++++++++++++++++++++...state.errors,
++++++++++++++++++++email:+"enter+a+valid+email"
++++++++++++++++}
++++++++++++}));
++++++++}
+++}|code-block|syntax|javascript|4403166|entityMap^0|5|A|T|5|Z|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

As mentioned above <code>setState()</code> is asynchronous in nature. I solved this issue simply using <code>async</code> <code>await</code>.

Here's an example for refernce:

<pre><code>continue = async (e) =&gt; {
 e.preventDefault();
 const { values } = this.props;
 await this.setState({
 errors: {}
 });
 const emailValidationRegex = /^(([^&lt;&gt;()\[\]\.,;:\s@\"]+(\.[^&lt;&gt;()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^&lt;&gt;()[\]\.,;:\s@\"]+\.)+[^&lt;&gt;()[\]\.,;:\s@\"]{2,})$/i;
 if(!emailValidationRegex.test(values.email)){
 await this.setState((state) =&gt; ({
 errors: {
 ...state.errors,
 email: "enter a valid email"
 }
 }));
 }
 }
</code></pre>

blocks|key|4403340|text|您还可以像下面这样更新状态两次，并立即更新状态，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403341|this.setState(
++++++++({+app_id+})+=>+({
++++++++++app_id:+2
++++++++}),+()+=>+{
++++++++++this.setState(({+app_id+})+=>+({
++++++++++++app_id:+2
++++++++++}))
++++++++}+)|code-block|syntax|javascript|4403342|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|$]]

You can also update the state twice like below and make the state update immediately, this worked for me:
<pre><code>this.setState(
 ({ app_id }) =&gt; ({
 app_id: 2
 }), () =&gt; {
 this.setState(({ app_id }) =&gt; ({
 app_id: 2
 }))
 } )
</code></pre>

blocks|key|4403378|text|在Ben+Hare的回答中，如果有人想要使用React+Hooks实现同样的功能，我在下面添加了示例代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4403379|import+React,+{+useState,+useEffect+}+from+"react"

let+[myArr,+setMyArr]+=+useState([1,+2,+3,+4])+//+the+state+on+update+of+which+we+want+to+call+some+function

const+someAction+=+()+=>+{
++let+arr+=+[...myArr]
++arr.push(5)+//+perform+State+update
++setMyArr(arr)+//+set+new+state
}

useEffect(()+=>+{+//+this+hook+will+get+called+everytime+when+myArr+has+changed
//+perform+some+action+which+will+get+fired+everytime+when+myArr+gets+updated
+++console.log('Updated+State',+myArr)
},+[myArr])|code-block|syntax|javascript|4403380|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|$]]

On Ben Hare's answer, If someone wants to achieve the same using React Hooks I have added sample code below.
<pre><code>import React, { useState, useEffect } from &quot;react&quot;

let [myArr, setMyArr] = useState([1, 2, 3, 4]) // the state on update of which we want to call some function

const someAction = () =&gt; {
 let arr = [...myArr]
 arr.push(5) // perform State update
 setMyArr(arr) // set new state
}

useEffect(() =&gt; { // this hook will get called everytime when myArr has changed
// perform some action which will get fired everytime when myArr gets updated
 console.log('Updated State', myArr)
}, [myArr])
</code></pre>

I'm working on a todo application. This is a very simplified version of the offending code. I have a checkbox:

<pre><code> &lt;p&gt;&lt;input type="checkbox" name="area" checked={this.state.Pencil} onChange={this.checkPencil}/&gt; Writing Item &lt;/p&gt;
</code></pre>

Here's the function that calls the checkbox:

<pre><code>checkPencil(){
 this.setState({
 pencil:!this.state.pencil,
 }); 
 this.props.updateItem(this.state);
}
</code></pre>

updateItem is a function that's mapped to dispatch to redux

<pre><code>function mapDispatchToProps(dispatch){
 return bindActionCreators({ updateItem}, dispatch);
}
</code></pre>

My problem is that when I call the updateItem action and console.log the state, it is always 1 step behind. If the checkbox is unchecked and not true, I still get the state of true being passed to the updateItem function. Do I need to call another function to force the state to update?

React setState not Updating Immediately

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我在做一个待办事项的申请。这是违规代码的一个非常简化的版本。我有一个复选框： <input type="checkbox" name="area" checked={this.state.Pencil} onChange={this.checkPencil}/> Writing Item 下面是调用...

问React setState未立即更新
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React setState未立即更新EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React setState未立即更新
EN