我试图理解为什么当我尝试在子组件按钮的 onclick 事件上设置状态时它会导致递归循环。
例如这段代码会产生错误:
import React, { useState } from "react";
export default function App() {
const [formState, setFormState] = useState({ name: "Joe" });
return (
<div className="App">
<Child state={formState} setState={setFormState} />
</div>
);
}
function Child({ state, setState }) {
return (
<div className="">
<h1>Name:{state.name}</h1>
<button onClick={setState({ name: "Bill" })}>Next</button>
</div>
);
}
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.
此错误发生在没有单击按钮的情况下进行渲染。它怎么会在没有发送点击的情况下导致编译递归?我不明白这是怎么回事。
如果我像这样使用箭头函数,就会出现错误:
function Child({ state, setState }) {
return (
<div className="">
<h1>Name:{state.name}</h1>
<button onClick={() => setState({ name: "Bill" })}>Next</button>
</div>
);
}
我有点理解箭头函数改变了this
,但这里发生的事情的细节是在暗示我。
谁能告诉我:
- 为什么不带箭头调用会导致递归循环?
- arrow 如何修复它?
最佳答案
在这条线上
<button onClick={setState({ name: "Bill" })}>Next</button>
您认为您正在做的是将带有参数 {name: "Bill"}
的 setState
分配给元素的 onClick 处理程序。事实并非如此。
您实际上在做的是调用 setState
函数在 渲染期间,这会更改状态并导致重新渲染。在重新渲染中,调用 setState
更改状态并导致重新渲染;在重新渲染中,调用 setState
等
使用 onClick={()=> {setState({name:"Bill"})}
创建箭头函数并将其分配给 onClick 处理程序。单击元素时,箭头函数会执行,并在内部调用 setState。
关于javascript - 为什么即使未单击按钮,子组件 onclick 中的设置状态也会导致递归循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64626366/