Question

我知道这个问题已经被问了一百万遍了，但是所有答案都是一样的，由于某种原因对我不起作用。我敢肯定，这已经很普遍了。

我有一个简单的渲染功能，

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>
        )

并且我拥有handleOnClick函数

  handleOnClick() {
    console.log('previous open: ', this.state.open)

    this.setState((prevState, props) => ({
        open: !this.state.open
    }), console.log('new state for open: ', this.state.open));

这只是我尝试过的一次迭代。我也尝试过open: !prevState.open和内嵌setState之类的onClick={this.setState({open: !this.state.open})}

<p>中的切换功能很好，但是<Collapse>没有最新状态。我知道setState是异步的，但是有一个回调（console.log）应该可以解决这个问题，不是吗？

最终，如何确保<Collapse>中的状态是最新的？

编辑：

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

Answer 1

请确保在尝试像这样更改handleOnClick函数后初始化状态为构造器的打开状态：

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

Answer 2

在您的情况下，许多事情可能出错。首先，请确保您的函数绑定到您的类，或使用箭头函数。

然后，您正在使用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切换折叠并展开一行

2 个答案: