setState 数组导致无限循环答案

【问题标题】：setState array cause infinite loopsetState 数组导致无限循环
【发布时间】：2020-08-22 04:43:36
【问题描述】：

我有根据采样大小创建的数组列表。当我用整个新数组设置数组时。我遇到了无限循环的错误。

代码

const sampleData = _.fill(Array(200), 0)
const [value, setValue] = useState(sampleData)

setValue(value.fill(100)) // Error

错误

错误：重新渲染过多。 React 限制渲染次数以防止无限循环。

【问题讨论】：

这是您组件代码的逐字 sn-p 吗？这不是表明您在每次渲染时都在做一个新的setValue 吗？
我假设您将其置于功能级别？如果你将它包裹在 onmount useEffect 上会不会有所改善？

标签： reactjs react-hooks

【解决方案1】：

您不应在渲染期间调用从 useState 返回的 setter 函数。它们要么需要在钩子（useEffect、useCallback、useLayoutEffect）回调中调用，要么在非渲染阶段调用，如事件处理程序。

在这种情况下，您可以这样做：

const sampleData = _.fill(Array(200), 0);
const [value, setValue] = useState(sampleData);

useEffect(() => {
  setValue(value.fill(100)); // Error
}, []);

【讨论】：