React：使用参数调用函数会导致无限循环

Question

所以，我有一个组件，使用这样的道具呈现另一个组件：

`<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等于id中div的显式类型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.

那么如何将显式类型的参数传递给＆＃34; prop函数＆＃34;没有创建无限循环？

Answer 1

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

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

Answer 2

您需要访问组件1中的参数：

<Component_Two onChange={(id) => this.changeSomething(id)} />

现在调用this.props.onChange(0)将传递0作为id的值。

Answer 3

像这样更改您的changeSomething函数：

const changeSomething = (id) => (event) => {
    this.setState({something: id});
}