我如何解决未捕获的错误:太多的重新渲染.React限制渲染的数量，以防止无限循环，而设置状态?

Question

我从像这样的另一个页面获得一个对象location。

const location = useLocation();

我正在尝试这样设置一个变量。

if (location.state !== null) {
console.log(location.state.name.companyName)
setcompanyOneAlready(location.state.name.companyName);
console.log(companyOneAlready);
}

但是这会导致"Too many renders"错误。我意识到这是因为我设置companyOneAlready的方式，但我不知道如何纠正这一点。如有任何帮助，不胜感激。

Answer 1

似乎您正在运行的代码作为一个无意的副作用，条件是畸形的。

使用useEffect钩子与正确的依赖关系发出副作用来更新状态。

的例子:

useEffect(() => {
if (location.state !== null) {
setcompanyOneAlready(location.state.name.companyName);
}
}, [location.state]);

为了帮助保存渲染，您还可以在进入状态更新队列之前检查当前的companyOneAlready值。

useEffect(() => {
if (location.state?.name?.companyName !== companyOneAlready) {
setcompanyOneAlready(location.state.name.companyName);
}
}, [location.state, companyOneAlready]);

Answer 2

似乎location.state永远不会为空。我相信默认情况下它是一个空对象，{} !== null总是为真。另外，我假设setcompanyOneAlready改变了组件中的状态。这将触发渲染，你的条件将在每次渲染中为真。这就是为什么会出现上述错误的原因。

你应该把这个条件放在useEffect中，useEffect应该在依赖数组中有一个name或companyName，只有当这些值中的一些被改变时才重新运行效果。