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

IT技术 reactjs
2021-05-18 15:00:14

所以，我有一个组件，它使用像这样的props呈现另一个组件：

`<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.

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

3个回答

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

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

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

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

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

changeSomething像这样改变你的功能：

const changeSomething = (id) => (event) => {
    this.setState({something: id});
}
其它你可能感兴趣的问题
上一篇将带有 RAMPS 的 Arduino Mega 和带有 CNC Shield 的 Arduino Uno 连接起来，以使用 Marlin 固件控制更多步进电机 下一篇从磁性钢板 PEI 上清除 PETG 残留物的最佳方法是什么？