setState数组导致无限循环

Question

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

代码

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

错误

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

Answer 1

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

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

const sampleData = _.fill(Array(200), 0);
const [value, setValue] = useState(sampleData);
useEffect(() => {
setValue(value.fill(100)); // Error
}, []);