React中遇到的Bug——Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a com

448 阅读1分钟

错误提示

Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate中的setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

错误代码

  lookOver=record => {
    this.setState({ isVisibleLookfor: true });
    console.log(record);
  }
 render: (text, record) => (
          <Space size="middle">
            <Button type="link" onClick={ this.lookOver(record)}>查看</Button>
          </Space>
        ),

分析

开始以为是record获取函数有问题,后来经分析发现是在render中自执行了函数,由此引发的崩溃。

解决方法

让按钮点击执行,而不是自执行

render: (text, record) => (
          <Space size="middle">
            <Button type="link" onClick={() => this.lookOver(record)}>查看</Button>
          </Space>
        ),

结果

正常获取行中数据
在这里插入图片描述