超过最大更新深度。当组件重复调用setState时,可能会发生这种情况

时间:2019-03-21 16:10:00

标签: javascript arrays reactjs ecmascript-6 es6-promise

我想调用一个方法,但与此同时它给我一个错误:

  

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。 React限制了嵌套更新的数量,以防止无限循环。

功能声明

datahandler= (val1,val2) => {
    this.setState(
      {
        dataNew:
          this.state.dataNew=== {val1} ? {val2} : {val1}
      },
      () => {
        this.getNew();
      }
    );
  };

函数调用

<Table.HeaderCell onClick={this.datahandler('name asc','name desc')}>
  Click Me to Call
</Table.Headercell>

1 个答案:

答案 0 :(得分:3)

您直接在渲染上调用this.sortHandler,这将导致setState被调用,进而导致新的渲染,并且无限循环继续。

您想给onClick一个函数,该函数应在发生点击事件时调用。

<Table.HeaderCell
  onClick={() => this.sortHandler("companyName asc", "companyName desc")}
>
  Click Me to Call
</Table.HeaderCell>