setState 上的动态变量不适用于切换

Question

我有这个功能

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

我在多个不同的下拉菜单中使用它

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

不知何故this.state.Dropdown1 或this.state.Dropdown2 在我单击div 时总是正确的，它不会切换，这是什么问题？

Answer 1

两件事，

1. 当你根据前一个状态设置状态时，对setState使用prevState回调机制，因为setState是asynchronous。

2. 你想得到this.state.Dropdown1，但你仍然设置openDropdown1

试试

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