Javascript和React设置数组中数组的状态，并使用spread运算符

Question

我使用react，想创建一个项数组，然后使用spread运算符，但设置时遇到了问题。

const [mediaArray, setMediaArray] = useState(null);
const [newArray, setNewArray] = useState([]);
const handleNewSet = index => {
setNewArray([...newArray[index], '']);
mediaArray[index] = {
...mediaArray[index],
['sets']: [...newArray[index], ''],
};
};

获取错误：TypeError:传播不可迭代实例的尝试无效

我有一个按钮，它将把newArray中的附加集合数组添加到mediaArray中。但是，因为我正在尝试遍历mediaArray，所以我希望确保正确的集合转到正确的mediaArray。我希望这是有意义的

所以我最终会有一套mediaArray和一套

mediaArray = {
sets: ['data1', 'data2', ...] //this will be from a specific index of the newArray
}

另一个mediaArray与另一组

mediaArray = {
sets: ['bb1', 'bb2', bb3, ...] //this will be from a specific index of the newArray
}

等等…

最终我想要一个新的阵列：

newArray = [['data1','data2', ...], [bb1, bb2, bb3, ...], [aa2, aa5, ...], [...]]

Answer 1

我看到的第一个问题是，您用null:const [mediaArray, setMediaArray] = useState(null);初始化mediaArray，但您正试图访问handleNewSet中已经存在的index。您还没有共享完整的代码，所以我假设您正在其他地方将其设置为一个空数组，如果没有：请确保这样做！

我现在只是猜测mediaArray[index]是undefined，并且传播它会抛出无法传播未定义的错误。

尝试以下代码更改：

const [mediaArray, setMediaArray] = useState(null);
const [newArray, setNewArray] = useState([]);
const handleNewSet = index => {
setNewArray([...newArray[index], '']);
// clone array for state update
const newMediaArray = [...mediaArray];
// check if there is already this index in mediaArray
if(mediaArray[index]) {
// update index
newMediaArray[index] = {
...mediaArray[index],
['sets']: [...newArray[index], ''],
};
} else {
// create index in array
newMediaArray[index] = {
['sets']: [...newArray[index], ''],
};
}
// finally update state
setMediaArray(newMediaArray);
};