reactjs - 反应 setState 不立即更新状态
问题描述
我必须选择下拉菜单两次才能更新详细信息。
<Dropdown
onSelect={(e) => {
if (e === "YES") {
this.setState({
BasePlantsSiteHire: "",
});
} else if (e === "NO") {
this.setState({
BasePlantsSiteHire: "N",
});
} else if (e === "ONLY") {
this.setState({
BasePlantsSiteHire: "Y",
});
}
this.componentDidMount();
console.log(
"Status Updated: ",
this.state.BasePlantsSiteHire
);
}}
>
<Dropdown.Toggle style={{ background: "none", border: "none" }}>
<CIcon name="cil-settings" />
</Dropdown.Toggle>
<Dropdown.Menu className="pt-0" placement="bottom-end">
<Dropdown.Item
eventKey="YES"
name="YES"
key="YES"
value="YES"
>
SubHire Include
</Dropdown.Item>
<Dropdown.Item eventKey="NO" name="NO" key="NO" value="NO">
SubHire Exclude
</Dropdown.Item>
<Dropdown.Item
eventKey="ONLY"
name="ONLY"
key="ONLY"
value="ONLY"
>
SubHire Only
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
我的问题是,当我调用选择下拉列表时,它不会立即更新,需要选择两次才能获取操作和 console.log 状态。
解决方案
React 的 setState 函数是异步的。你所经历的是完全正常的行为。如果您需要在状态更新后执行某些操作,您可以将回调函数作为第二个参数传递给 setState,如下所示:
this.setState({
...
}, () => {
console.log(
"Status Updated: ",
this.state.BasePlantsSiteHire
);
// do something here
})
另外,请不要显式调用 componentDidMount,这些是组件生命周期方法,将由 React 本身在组件的整个生命周期中调用!
推荐阅读
- amazon-web-services - Redshift Unload:仅在第一个分区中添加标头,不包括其余部分
- antivirus - 从命令行允许文件 Symantec Endpoint Protection
- semantic-web - json-ld:引用模式的详细信息:Person
- javascript - JSON - Select2 数据格式
- javascript - Transfer file between servers
- c# - WPF pass reference of controls to user control
- c# - Unity main thread freeze with NetworkStream.ReadAsync?
- mysql - update SQL statement if only exist a record in a table
- c# - MimeKit 偏移量 37 处的意外令牌
- xquery - multiple statements in if condition in xquery