ReactJS：超过最大更新深度错误

Question

我正在尝试在 ReactJS 中切换组件的状态，但我收到一条错误消息：

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

我的代码中没有看到无限循环，有人可以帮忙吗？

ReactJS 组件代码：

import React, { Component } from 'react';
import styled from 'styled-components';

class Item extends React.Component {
    constructor(props) {
        super(props);
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        }
    }
    toggle(){
        const currentState = this.state.details;
        this.setState({ details: !currentState });
    }

    render() {
        return (
            <tr className="Item">
                <td>{this.props.config.server}</td>
                <td>{this.props.config.verbose}</td>
                <td>{this.props.config.type}</td>
                <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td>
                {<td><span onClick={this.toggle()}>Details</span></td>}
            </tr>
    )}
}

export default Item;

原文由 Maja Okholm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

那是因为您在渲染方法中调用切换将导致重新渲染和切换将再次调用并再次重新渲染等等

您的代码中的这一行

{<td><span onClick={this.toggle()}>Details</span></td>}

你需要让 onClick 引用 this.toggle 不调用它

要 解决 问题，请执行此操作

{<td><span onClick={this.toggle}>Details</span></td>}

原文由 Ali Faris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首先忘记反应：

这与 React 无关，让我们了解 Java Script 的基本概念。例如，您在 java 脚本中编写了以下函数（名称为 A）。

 function a() {

};

Q.1) 如何调用我们定义的函数？

答：a();

Q.2) 如何传递函数的引用以便我们可以在后面调用它？

答案：让乐趣= a；

现在谈到你的问题，你已经使用了带有函数名称的括号，这意味着将在渲染以下语句时调用该函数。

 <td><span onClick={this.toggle()}>Details</span></td>

那么如何纠正呢？

简单的！！只需删除括号。通过这种方式，您已将该函数的引用提供给 onClick 事件。只有当您的组件被点击时，它才会回调您的函数。

  <td><span onClick={this.toggle}>Details</span></td>

一项与反应相关的建议：

避免按照某人在答案中的建议使用内联函数，这可能会导致性能问题。避免下面的代码，它会在调用函数时一次又一次地创建相同函数的实例（lamda 语句每次都创建新实例）。

注意： 并且无需将事件 (e) 显式传递给函数。您可以在函数中访问它而无需传递它。

 {<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

原文由 Piyush N 发布，翻译遵循 CC BY-SA 4.0 许可协议