Reactjs 为什么我的反应是'；渲染时触发的组件单击方法？

我正在ES6中使用箭头函数重写ReactJS（以删除

.bind（）

、类属性和类型脚本的使用）

显然，在我的代码中，

handleSquareClick

在渲染时被触发，因此执行

setState

，导致错误

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

为什么

游戏.tsx：

import React, { PureComponent } from 'react';
import Board from "../Board";

class Game extends PureComponent {

    state = {

        history: [{
            squares: Array(9).fill(null)
        }],

        currentStep: 0,

        xIsNext: true
    };


    handleSquareClick = (i) => {
        console.log(i);

        // ...more code here

        this.setState({
           history: [...historyClone, { squares }],
           currentStep: historyClone.length,
           xIsNext: !xIsNext
        });

    };


    render() {
        const { history, currentStep } = this.state;

        const current = history[currentStep];

        return (
            <div>
                {  }
                <Board
                    squares={current.squares}
                    handleSquareClick={this.handleSquareClick}

            <
        );
    }

}

export default Game;

---

您只需更改以下内容：

onClick={this.props.handleSquareClick(value)}>

为此：

onClick={()=> this.props.handleSquareClick(value)}>

因为

onClick

需要一个函数作为值，但您所做的是调用这个函数

---

我们知道如果我们把（）放在一个函数的末尾，这个函数就会被调用。所以我改变的是通过使用

（）=>…

箭头函数来传递这个函数而不调用它。

你能分享board.tsx的源代码吗？因为你在这两个函数中共享了相同的代码snippets@AliHayder现在答案的一部分是“你告诉我们了吗？”你还有很多代码要减少：去掉所有与问题无关的函数，这样剩下的就是最简洁的演示。但通常在形成过程中，你会自己发现问题，并将其转化为我想我应该删除这个问题“situation@Mike“Pomax”Kamermans我简化了这个问题：）谢谢@Ali。似乎有效。你能解释一下具体原因吗？这是因为onClick期望函数作为一个值，但你所做的是像这样调用这个函数

This.props.handleSquareClick（值）

。我们知道，如果我们将

（）

放在函数的末尾，该函数将被调用。因此，我所做的更改是传递函数而不调用它，即

（）=>

此箭头函数是函数的定义，但它不是在同一时刻调用的，而是函数的定义，函数中有另一个被调用的函数，即

this.props.handleSquareClick（value）

onClick={this.props.handleSquareClick(value)}>

onClick={()=> this.props.handleSquareClick(value)}>