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

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

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

我这样做：

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

---

for（设i=0；i我相信您可能遇到问题，因为调用
setstringaray
是一种“副作用”

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

本质上，您不应该试图在同一行中读取和更新
strArray

完全填充数组后，只需调用一次
setStrArr

我认为你也应该考虑使用钩子来做这种行为

它传递的最后一个参数告诉React，如果给定的参数（
strArray
在本例中）发生更改，则只运行此
useffect
钩子中的代码

这个钩子是为你想要在你的组件中产生“副作用”而设计的

因此，也许您可以尝试一些类似的方法来防止无限重渲染：

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>
  )
}

函数MyApp（）{
const[strArr，setStrArr]=useState（[]）；
useffect（（）=>{
常数fouriarray=[]；
对于（设i=0；i在rerender上调用整个函数MyApp，因此在每个rerender上，您的循环都会重新开始。如果您只想调用一次，请在useffect中调用它。如是

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

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

另外，如果您想设置初始状态，我建议您在useState（['hi'，'hi'，'hi'，'hi']）中进行设置
在其他答案的基础上，由于您正在执行同步代码，我将使用useLayoutEffect挂钩。useLayoutEffect运行，React等待它完成。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>
  )
}

函数MyApp（）{
const[strArr，setStrArr]=useState（[]）；
useLayoutEffect（（）=>{
设fourHiArray=[]；
对于（让我=0；我在JSX中你在为循环做这个吗？你在使用钩子吗？钩子的依赖性是什么？@Amir Mousavi添加了我的代码谢谢。但是你能进一步解释一下为什么改变状态会导致重新渲染吗？一直以来，我认为只有使用像
useffect
这样的钩子才会导致重新渲染无限响。别担心！希望这有帮助。因此，当状态更新时，React组件将始终重新渲染！这是“React就是这样工作的”。这里有一篇很酷的博客文章：。非常感谢。我以前还没有使用过
useLayoutEffect
，我会仔细阅读
useEffect(() => {*your code here*}, []}

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>
  )
}