Question

我正在使用react-modal，在这样做时，我遇到了一个问题，我在应用程序渲染时设置了状态。为什么以下.bind(this)的代码是可以的：

constructor(props) {
    super(props);
    this.state = {
        open: false
    }
}

openModal() {
    this.setState({
        open: true
    })
}

render() {
    return (
        <div>
            <button onClick={this.openModal.bind(this)}>Open Modal</button>
            <Modal isOpen={this.state.open}>
                <h1>I am a modal</h1>
            </Modal>
        </div>
    )
}

但这不是：

...
<button onClick={this.openModal()}>Open Modal</button>
...

我收到了关于setState(…): Cannot update during an existing state transition的警告，如果有人能向我解释那就太好了。

Answer 1

我相信当你正在写onClick={this.openModal()}代替onClick={this.openModal}时，你实际上在渲染过程中调用了这个函数（即＆＃34;状态转换＆＃34）。此功能正在通过setState调用更改状态。更改渲染内的状态是反模式。这就是你收到警告的原因。

话虽如此，在回调时需要.bind(this)，因为您在方法中使用了this关键字。通常，特别是您希望this指向该组件。但Javascript很有趣this取决于谁调用该函数，当你像那样传递它时（作为onClick回调），它可能不会是组件谁会打电话给它。因此，为了确保this指向正确的事物，您bind。

为什么.bind（this）修复了setState呈现问题？

1 个答案: