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

Question

I using react and wanted to create an array of items and then use spread operator, but I'm having trouble setting it up.

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

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

Getting the error: TypeError: Invalid attempt to spread non-iterable instance

I have a button, that will add additional array of sets from newArray into the mediaArray . But because I'm trying to iterate through the mediaArray , I want to make sure that the correct sets goes to the correct mediaArray. I hope that makes sense

So I'll eventually have 1 set of mediaArray with 1 set of sets

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

Another mediaArray with another set of sets

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

And so on...

Eventually I would like to have newArray:

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

Answer 1

The first problem I am seeing is that you initialize your mediaArray with null : const [mediaArray, setMediaArray] = useState(null); but you are trying to access the index of it already in handleNewSet . You have not shared your full code, so I am assuming you are setting it to an empty array somewhere else, if not: make sure that you do!

I am just guessing now that mediaArray[index] is undefined and spread it will throw the error that you cannot spread undefined.

Try the following code changes:

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);
};