Реагирует на обновление массива состояний внутри массива

#javascript #reactjs

Вопрос:

В настоящее время я пытаюсь обновить объект состояния внутри моего компонента на основе класса react.

Проблема в том, что мое состояние представляет собой 2-мерный массив, который выглядит следующим образом:

 this.state = {
  items: [
    {
      title: 'first depth',
      items: [
        {
          title: 'second depth',
        },
      ],
    },
  ],
};

Для обновления первой глубины массива внутри моего объекта состояния я использую этот код:

 this.setState(({items}) => ({
  items: [
    ...items.slice(0, index),
    {
      ...items[index],
      title: 'new Title',
    },
    ...items.slice(index   1),
  ],
}));

Но я не могу обновить вторую глубину массива внутри моего состояния.

У кого-нибудь есть идея, как обновить вторую глубину?

1. Привет, вам нужно обновить все элементы сразу? если нет, вы могли бы просто получить второй глубокий элемент, обновить его содержимое, а затем обновить основной массив

Ответ №1:

создайте новое состояние путем распространения, затем измените внутренний массив путем сращивания:

 this.setState((oldState) => {
   const newState = {...oldState}; 
   const newItem = { ...newState.items[index],  title:"new Title"};
   newState.items.splice(index, 1,  newItem);
   return newState;
}

Ответ №2:

Следуя тому же шаблону, вам понадобится индекс элемента 2-й глубины, который вы хотите изменить.

 this.setState(({items}) => ({
  items: [
    ...items.slice(0, index),
    {
      items: [
        ...items[index].slice(0, indexOf2ndDepth),
        {
          title: 'new Title'
        },
        ...items[index].slice(indexOf2ndDepth   1),
      ],
      title: 'new Title',
    },
    ...items.slice(index   1),
  ],
};
}));

Это может быть довольно сложным, и я рекомендовал вам сначала изолировать массив 2-й глубины, внести изменения и вставить его в массив 1-й глубины

 
this.setState(({ items }) => {
  const secondDepthArray = [
    ...items[index].slice(0, indexOf2ndDepth),
    {
      title: 'new Title',
    },
    ...items[index].slice(indexOf2ndDepth   1),
  ];

  return {
    items: [
      ...items.slice(0, index),
      {
        items: secondDepthArray
        title: 'new Title',
      },
      ...items.slice(index   1),
    ],
  };
});

Ответ №3:

Для этого вы можете сохранить свое состояние в переменной и после этого обновить свой массив, используя prev prevState для обновления вашего состояния вашего массива

Ответ №4:

Вы можете клонировать новый массив из состояния

 const newItems = [...this.state.items]
// And then modify it

Так что, если вы хотите обновить массив, просто setState

 this.setState({items: newItems})