ReactJS：警告：setState（…）：在现有状态转换期间无法更新

我用来为组件打开Popover的解决方案是reactstrap（React Bootstrap 4组件）。

    class Settings extends Component {
        constructor(props) {
            super(props);

            this.state = {
              popoversOpen: [] // array open popovers
            }
        }

        // toggle my popovers
        togglePopoverHelp = (selected) => (e) => {
            const index = this.state.popoversOpen.indexOf(selected);
            if (index < 0) {
              this.state.popoversOpen.push(selected);
            } else {
              this.state.popoversOpen.splice(index, 1);
            }
            this.setState({ popoversOpen: [...this.state.popoversOpen] });
        }

        render() {
            <div id="settings">
                <button id="PopoverTimer" onClick={this.togglePopoverHelp(1)} className="btn btn-outline-danger" type="button">?</button>
                <Popover placement="left" isOpen={this.state.popoversOpen.includes(1)} target="PopoverTimer" toggle={this.togglePopoverHelp(1)}>
                  <PopoverHeader>Header popover</PopoverHeader>
                  <PopoverBody>Description popover</PopoverBody>
                </Popover>

                <button id="popoverRefresh" onClick={this.togglePopoverHelp(2)} className="btn btn-outline-danger" type="button">?</button>
                <Popover placement="left" isOpen={this.state.popoversOpen.includes(2)} target="popoverRefresh" toggle={this.togglePopoverHelp(2)}>
                  <PopoverHeader>Header popover 2</PopoverHeader>
                  <PopoverBody>Description popover2</PopoverBody>
                </Popover>
            </div>
        }
    }

我打电话时遇到了同样的错误

this.handleClick = this.handleClick.bind(this);

在我的构造函数中，当handleClick不存在时

（我已经删除了它，并且不小心将“ this”绑定语句留在了我的构造函数中）。

解决方案=删除“ this”绑定语句。

问题当然是在绑定带有onClick处理程序的按钮时的绑定。解决方案是在渲染时调用动作处理程序时使用箭头功能。像这样： onClick={ () => this.handleButtonChange(false) }

render()呼叫中发生的任何状态更改都将发出相同的警告。

一个棘手的例子：在基于状态数据呈现多选GUI组件时，如果state没有要显示的内容，resetOptions()则对该组件的调用被视为状态更改。

明显的解决方法是用resetOptions()in componentDidUpdate()代替render()。

来自react docs将参数传递给事件处理程序

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

通常发生在您打电话时

onClick={this.handleButton（）}-注意（），而不是：

onClick={this.handleButton} -请注意，我们在初始化函数时并未调用该函数

我在下面的代码中给出了一个通用示例，以使您更好地理解

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment()} <------ calling the function
          onDecrement={this.props.decrement()} <-----------
          onIncrementAsync={this.props.incrementAsync()} />
      </div>
    )
  }

提供道具时，我直接调用该函数，该循环执行无限循环，并且会给您该错误，删除该函数可以正常工作。

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment} <------ function call removed
          onDecrement={this.props.decrement} <-----------
          onIncrementAsync={this.props.incrementAsync} />
      </div>
    )
  }

看起来您不小心handleButtonChange在render方法中调用了该方法，而您可能想这样做onClick={() => this.handleButtonChange(false)}。

如果您不想在onClick处理程序中创建lambda，我认为您将需要两个绑定方法，每个参数一个。

在constructor：

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

并在render方法中：

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>