使用 useState 和 spread 语法创建对象数组

Question

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

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

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

Answer 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]);

Answer 2

这里有两件事：

您在 setNumbers

[

设置状态是异步的，因此您必须使用 setNumbers 提供的先前值：

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

使用 useState 和 spread 语法创建对象数组

Create an array of objects with useState and spread syntax

javascript

reactjs

react-native

use-state

spread-syntax