Reactjs 使用setState切换折叠和展开行

我知道这个问题已经被问过无数次了，但是所有的答案都是一样的，而且由于某些原因，对我来说并不适用。我相信有人已经有了一个很好的解决方案，因为这是如此普遍

我有一个简单的渲染函数

return(
            <div>
                <p className="profile-category" onClick={this.handleOnClick}>{this.props.title}:<Glyphicon glyph={opened ? "menu-up" : "menu-down"}/></p>
                <Collapse in={opened}>
                    <div>
                        <p>some components that are not important</p>
                    </div>
                </Collapse>
            </div>
        )

这只是我尝试的一次迭代。我还尝试了

open:！prevState.open

，以及类似于

onClick={this.setState（{open:！this.state.open}）}的内联setState

中的切换工作正常，但是

没有最新状态。我知道

setState

是异步的，但是有一个回调（console.log）应该可以解决这个问题，不是吗

最后，我如何确保

中的状态是最新的

编辑：

---

事实证明我安装了bootstrap 4，这是bootstrap不支持的。检查您的package.json以确保引导版本为3。

确保在初始化打开状态（构造函数）之后，尝试更改

函数，如下所示：

 onClick={() => this.setState({ open: !this.state.open })}

确保在初始化打开状态（构造函数）之后，尝试更改
handleon，然后按如下方式单击
函数：

 onClick={() => this.setState({ open: !this.state.open })}

在你的情况下，很多事情可能会出错。首先，确保函数已绑定到类，或者使用箭头函数

然后，您使用的是
setState
函数的回调版本，但不使用以前的状态：

handleOnClick = event => {
    this.setState(prevState => ({ open: !prevState.open }))
}

如果您想让您的
console.log
打印出正确的更新值，则必须将其放入函数中，而不是直接执行它，因为
setState
的第二个参数是回调：

handleOnClick = event => {
    this.setState(
        prevState => ({ open: !prevState.open }),
        () => { console.log(this.state.open) }
    )
}

在你的情况下，很多事情可能会出错。首先，确保函数已绑定到类，或者使用箭头函数

然后，您使用的是
setState
函数的回调版本，但不使用以前的状态：

handleOnClick = event => {
    this.setState(prevState => ({ open: !prevState.open }))
}

如果您想让您的
console.log
打印出正确的更新值，则必须将其放入函数中，而不是直接执行它，因为
setState
的第二个参数是回调：

handleOnClick = event => {
    this.setState(
        prevState => ({ open: !prevState.open }),
        () => { console.log(this.state.open) }
    )
}

这是
折叠
来自
物料界面
？
折叠
来自React引导，抱歉。不熟悉react bootstrap
，但您可能需要花点时间来确保了解如何传递函数。现在，在
setState
的第二个参数和内联示例中，都没有传递稍后执行的代码。您正在立即执行代码并传递这些函数的返回值。这是来自
材质UI
的
折叠
？
折叠
来自React引导，抱歉。不熟悉react bootstrap
，但您可能需要花点时间来确保了解如何传递函数。现在，在
setState
的第二个参数和内联示例中，都没有传递稍后执行的代码。您正在立即执行代码并传递这些函数的返回值。我开始认为这是bootstrap的问题。。。。。。我做了一些实验，比如
this.state.open？“打开”：“关闭”
且状态始终正确。也许是css问题阻止了它的出现？我开始认为这是bootstrap的问题。。。。。。我做了一些实验，比如
this.state.open？“打开”：“关闭”
且状态始终正确。可能是css问题阻止了它的显示？