Question

我正在学习React，在下面的代码中我得到了...cannot update during an existing state transition...。在寻找修复它时，我在SO中读到setState不应该在render（）中使用，因为它反复调用render（）导致无限循环。但我不知道如何解决它。

import React from 'react';
import ReactDOM from 'react-dom';

export default class CheckBox extends React.Component{
    constructor() {
        super();
        this.state = {isChecked: false};
    }
    handleChecked () {
        this.setState({isChecked: !this.state.isChecked});
    }
    render(){
        var txt;
        if (this.state.isChecked) {
            txt = 'checked'
        } else {
            txt = 'unchecked'
        }
        return(
          <div>
            <input type="checkbox" onChange={this.handleChecked()}/>
            <p>This box is {txt}</p>
          </div>
        );
    }
}

ReactDOM.render(<CheckBox/>, document.getElementById('hello'));

Answer 1

你应该传递给onChange函数的引用，但不要调用它。在你的例子中，你正在调用handleChecked（因为函数后面有()）并且结果传递给{{但是，在这种情况下，结果将是onChange，因此undefined看起来像onChange。此外，您无法在初始渲染期间设置状态，但是您尝试使用包含onChange={ undefined }的{{1}}进行设置。

this.handleChecked()

Example

如何处理在React中设置状态的onChange事件？

1 个答案: