0

我使用 react 并想创建一个项目数组，然后使用扩展运算符，但我在设置它时遇到了麻烦。

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。我希望这是有道理的

所以我最终会有 1 组 mediaArray 和 1 组

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：

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

1 回答 1

0

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

我现在只是在猜测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);
};
于 2020-03-12T17:41:55.257 回答