使用 useState 和传播语法创建对象数组答案

【问题标题】：Create an array of objects with useState and spread syntax [duplicate]使用 useState 和传播语法创建对象数组
【发布时间】：2021-12-28 12:57:02
【问题描述】：

我正在尝试使用循环和展开语法创建一个非常简单的数字数组，目标：

    const number = props.numberProp


    const [numbers, setNumbers] = useState([
        {numberName: 1, key: 1},
        {numberName: 2, key: 2},
        {numberName: 3, key: 3},
        {numberName: 4, key: 4},
    ])

但它不起作用，我的循环似乎工作正常，但它没有将值分配给数组。

const number = props.numberProp

const [numbers, setNumbers] = useState([])

let i = 0;
while(i < number){
    setNumbers(...numbers, {numberName: i, key: i})
    i++      
}

我查找了教程和视频，但未能解决我的问题。

【问题讨论】：

标签： javascript reactjs react-native use-state spread-syntax

【解决方案1】：

当你设置一个新值时，确保你也添加了以前的值

const number = props.numberProp;

const [numbers, setNumbers] = useState([]);

const nums = [];
for (let i = 0; i < number; i++) {
  nums.push({ numberName: i, key: i });
}
setNumbers((numbers) => [...numbers, ...nums]);

【讨论】：

感谢您的快速回答，但它仍然无法正常工作，我有一个无限循环，它分配 number 而不是 i，我查看了 i 是否是问题，但不是，它即使我为i 分配了一个特定的值，它也不起作用。这是 `console.log(numbers)' 的样子： 0: ' {numberName: 33, key: 33} 1: {numberName: 33, key: 33} 2: {numberName: 33, key: 33} 3: {numberName: 33, key: 33}' 等等...
@owdji 我已经更新了我的答案，希望能有所帮助，而且性能也更好。
使用您的代码后，我设法完成了数组，之后我的组件仍在无限时间重新渲染，但这个问题通过 useEffect() 解决了。谢谢。

【解决方案2】：

这里有两件事：

你在setNumbers 中忘记了[
设置状态是异步的，所以你必须使用setNumbers之前提供的值：

setNumbers(prev=> [...prev, {numberName: i, key : i}])

【讨论】：