Javascript и React устанавливает состояние массивов внутри массивов и использует оператор распространения

Question

Я использую реагирование и хотел создать массив элементов, а затем использовать оператор спреда, но у меня возникли проблемы с его настройкой.

const [mediaArray, setMediaArray] = useState(null);
const [newArray, setNewArray] = useState([]);

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

Получение ошибки: Ошибка типа: недопустимая попытка чтобы распространить не повторяемый экземпляр

У меня есть кнопка, которая добавит дополнительный массив наборов из newArray в mediaArray. Но поскольку я пытаюсь перебрать mediaArray, я хочу убедиться, что правильные sets идут в правильный 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, ...], [...]]

Answer 1

Первая проблема, которую я вижу, состоит в том, что вы инициализируете 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);
};