对数组使用 setState 时的无限循环

Question

我想在一个数组中存储 4 个“hi”。而不是：

strArr.push('hi');
strArr.push('hi');
strArr.push('hi');
strArr.push('hi');

我这样做了：

for(let i = 0; i<4; i++){
   setStrArr([...strArr, "hi"])
}

但是，我收到此错误：错误：重新渲染过多。 React 限制渲染次数以防止无限循环

我不知道出了什么问题，我想知道当 i=3 时它是否没有达到。所以我做了一个检查：

for(let i = 0; i<4; i++){
   setStrArr([...strArr, "hi"])
   if(i==3){
      console.log("done")
   }
}

'i'的值确实达到了3，但是为什么我的代码又运行了？

这是我的代码：

function MyApp(){
  const [strArr, setStrArr] = useState([]);
  for(let i = 0; i<4; i++){
       setStrArr([...strArr, "hi"])
       if(i==3){
          console.log("done")
       }
    }      
  return(
    <div>
    </div>
  )
}

Answer 1

添加到其他答案，因为您正在执行 同步 代码，我将使用 useLayoutEffect 挂钩。 useLayoutEffect 运行，React 等待它完成。这对于响应等待来说很好，因为代码都是同步的，并且它可以防止您的组件在屏幕上“闪烁”，因为在渲染完成后会调用 useEffect。

function MyApp(){
  const [strArr, setStrArr] = useState([]);

  useLayoutEffect(() => {
     let fourHiArray = [];

    for(let i = 0; i<4; i++){
       fourHiArray = ([...fourHiArray, "hi"])
       if(i==3){
          console.log("done")
       }
    } 

    setStrArr(fourHiArray);
  }, []);
       
  return(
    <div>
    </div>
  )
}

Answer 2

在重新渲染时调用整个函数 MyApp，因此在每次重新渲染时，您的循环都会重新开始。如果您只想调用一次，请在 useEffect 中调用它。像这样

useEffect(() => {*your code here*}, []}

使用空数组作为第二个参数的 useEffect 仅在第一次渲染时调用。

如果你想设置你的初始状态，我建议你在 useState(['hi','hi','hi','hi'])

Answer 3

我相信您可能会遇到问题，因为调用 setStringArray 是一种“副作用”。

这将导致函数组件无限重新渲染，因为钩子已经更新了组件的状态，导致重新渲染，然后无限更新状态。

基本上，您不应该尝试在同一行中同时读取和更新strArray。

您应该只在完全填充数组后调用setStrArr一次。

我认为您还应该考虑使用 useEffect 钩子来实现这样的行为。

它传递的最后一个参数告诉 React 仅在给定的参数（在本例中为 strArray）发生更改时才运行此 useEffect 挂钩内的代码。

当您希望在您的组件中具有“副作用”时，此钩子设计。

所以也许你可以尝试一些类似的方法来防止你的无限重新渲染：

function MyApp(){
  const [strArr, setStrArr] = useState([]);

  useEffect(() => {
     const fourHiArray = [];

    for(let i = 0; i<4; i++){
       fourHiArray = ([...fourHiArray, "hi"])
       if(i==3){
          console.log("done")
       }
    } 

    setStrArr(fourHiArray);
  }, [strArr]);
       
  return(
    <div>
    </div>
  )
}