你能在 React 中使用 while 循环吗？ [复制]答案

【问题标题】：Can you use a while loop in React? [duplicate]你能在 React 中使用 while 循环吗？ [复制]
【发布时间】：2023-01-24 22:25:55
【问题描述】：

问题：我试图从一个列表中创建一个包含 4 个元素的数组，但是 while 循环总是产生一个无限循环。

const [options, setOptions] = useState([]);

const getThings = () => {
     while(options.length < 4) {
          let randomThing = 
listOfThings[Math.floor(Math.random()*listOfThings.length)];

     !options.includes(randomThing) && setOptions([...options, randomThing]);
    }
};

我相信这个问题与另一个问题有关 - 当我调用该函数一次时，即使没有附加 while 循环，它也会被随机调用 2 - 9 次。仍在试图弄清楚为什么它一直随机发射这么多。

getThings();

【问题讨论】：

标签： javascript reactjs arrays while-loop

【解决方案1】：

setState 不会立即更改任何值。首先创建整个数组，然后在循环结束时设置状态。

const getThings = () => {
    let newOptions = [...options];
    while (newOptions.length < 4) {
        let randomThing = listOfThings[Math.floor(Math.random()*listOfThings.length)];
        if (!newOptions.includes(randomThing)) newOptions.push(randomThing);
    }
    setOptions(newOptions);
};

【讨论】：

这是一个不断重复重复的问题。它不需要另一个答案。

【解决方案2】：

错误是因为你在循环中调用 setOptions，你可以在函数中缓存一个新的输出，然后在最后调用钩子

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

【讨论】：