Javascript setState won'上的动态变量；不适用于切换

我有这个功能

toggleDropdown = (name) => {
    this.setState({
        [`open${name}`]: !this.state[`${name}`]
    })
}

我在多个不同的下拉列表中使用它

<div onClick={e=> toggleDropdown('Dropdown1')}</div>
<div onClick={e=> toggleDropdown('Dropdown2')}</div>

toggleDropdown（'Dropdown1'）}
toggleDropdown（'Dropdown2'）}

不知何故，

this.state.Dropdown1

或

this.state.Dropdown2

在我单击divs时总是正确的，它不会切换，有什么问题吗？

两件事

基于上一个设置状态时，请使用

prevState

回调机制来调用

setState

，因为

setState

是

异步的

您想获得

这个.state.Dropdown1

但仍然设置了

openDropdown1

试一试

---

您确定要反转同一字段吗<代码>[`open${name}`]：！this.state[`open${name}`]注意，

setState

是异步的，在您的情况下，最好使用this.setState（prevState=>（{}））@hmnzr是的，但是为什么这样做：

this.setState（{openDropdown:！this.state.openDropdown}）

？因为异步意味着它不能保证任何顺序，所以在处理速度较慢的情况下，或者在一个更新周期内多个

setState

将导致意外的结果，但为什么这样做：

this.setState（{openDropdown:！this.state.openDropdown}）

？它有时有效，有时无效，这取决于处理的速度。上述代码的行为将不一致，因此建议对setState使用回调方法

toggleDropdown = (name) => {
    this.setState((prevState) => ({
        [name]: !prevState[name]
    }))
}