反应：调用带有参数的函数会导致无限循环

Question

因此，我有一个组件，它使用prop渲染另一个组件，如下所示：

`<Component_One>
    <Component_Two onChange={this.changeSomething} />
</Component_One>`

在Component_One内部，该函数changeSomething()采用一个参数：id

所以在里面Component_One，changeSomething()看起来像这样：

`changeSomething(id) {
    this.setState({something: id});
}`

Component_Two 看起来像这样：

`<div id="componenttwo">
    <div onClick={this.props.onChange(0)}>
        <div className="badge"></div>
    </div>
    <div onClick={this.props.onChange(1)}>
        <div className="badge"></div>
    </div>
    <div onClick={this.props.onChange(2)}>
        <div className="badge"></div>
    </div>
</div>`

目的是让this.state.something内部Component_One等于...中iddiv 的显式类型Component_Two。

但相反，它将引发此错误： SCRIPT5022: 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.

那么，如何在不创建无限循环的情况下将显式类型的参数传递给“ prop函数”呢？

Answer 1

您应该将一个函数传递给onClick处理程序，但您正在调用该函数。因此，该函数将立即调用并设置state导致重渲染的函数，从而导致无限循环。通过一个函数代替

onClick={() => this.props.onChange(0)}