Как добавить значение в состояние массива?

ProgramBox

Как добавить значение в состояние массива?

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#javascript #reactjs #react-native

Вопрос:

Я пытаюсь добавить новое значение в состояние массива, но это выдает ошибку.

код

 async shouldComponentUpdate(prevProps) {
    if (prevProps.navigation.state.params.updated) {
      const { updated } = prevProps.navigation.state.params;
      // updated = object
      const { typeTwo, typeThree } = this.state;
      const typeTwoUpdated = await typeTwo.filter((v) => v.id !== updated.id);
      const typeThreeUpdated = await typeThree.push(updated);
      this.setState({ typeTwo: typeTwoUpdated, typeThree: typeThreeUpdated });
    }
  }

Ошибка

 > [Unhandled promise rejection: TypeError: typeThree.push is not a function. (In 'typeThree.push(updated)', 'typeThree.push' is undefined)]

Редактировать

Изменен код.

 async shouldComponentUpdate(prevProps) {
    if (prevProps.navigation.state.params.updated) {
      const { updated } = prevProps.navigation.state.params;
      // updated = object
      const { typeTwo, typeThree } = this.state;
      // typeThree = []
      const typeTwoUpdated = typeTwo.filter((v) => v.id !== updated.id);
      this.setState({ typeTwo: typeTwoUpdated, typeThree: [...typeThree, updated] });
    }
  }

новая ошибка

[Отклонение необработанного обещания: Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.]

1. Не могли бы вы, пожалуйста, показать пример того, что такое объект / массив typeThree?

2. typeThree — это массив

3. Похоже, у вас нет массива

4. Прямо в ошибке говорится, что вы не обрабатываете параметр promise «успех или сбой» перед его использованием.

5. Это почти наверняка неполный пример. Либо вы await вводите ответ от синхронного собственного метода, либо typeThree это не массив. Собственный метод возвращает новую длину, но вы ожидаете, что в качестве возвращаемого значения будет изменен массив, и ваша ошибка предполагает, что push не определено для целевого вызывающего объекта. Короче говоря, нам нужно больше деталей.

Ответ №1:

Проверьте начальное состояние, в частности state.typeThree. shouldComponentUpdate Можно было бы запустить перед вызовом this.setState({typeThree: Array})

Редактировать: Пожалуйста, не добавляйте элементы в массив, на который ссылается состояние компонента React.
const typeThreeUpdated = typeThree amp;amp; typeThree.length ? [...typeThree] : [];

typeThreeUpdated.push(updated);

this.setState({ typeTwo: typeTwoUpdated, typeThree: typeThreeUpdated });

Правка 2: Итак, вот что происходит

const typeThreeUpdated = await typeThree.push(updated);

эта строка приведет к тому, что typeThreeUpdated будет целочисленным значением, которое является новой длиной typeThree после ввода нового элемента. push изменяет массив, но возвращает не новый массив, вместо этого он возвращает новую длину. Затем оно сохраняется в состоянии как typeThree в этой строке

this.setState({ typeTwo: typeTwoUpdated, typeThree: typeThreeUpdated });

и при следующем запуске функции this.state.typeThree по-прежнему будет тем числом, у которого нет функции push.

Обратите внимание, что вам не нужно await здесь

Ответ №2:

Попробуйте это

 async shouldComponentUpdate(prevProps) {
    if (prevProps.navigation.state.params.updated) {
      const { updated } = prevProps.navigation.state.params;
      // updated = object
      const { typeTwo, typeThree } = this.state;
      // typeThree = []
      const typeTwoUpdated = typeTwo.filter((v) => v.id !== updated.id);
      this.setState({ typeTwo: typeTwoUpdated, typeThree: [...typeThree, updated });
    }
  }

Ответ №3:

См.:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Прежде всего, Array.prototype.push это синхронная операция, она не требует ожидания.

Во-вторых, он возвращает length значение массива при вызове и изменяет базовый массив.

Пример

 const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

У вас есть два способа сделать это:

Изменение

       typeThree.push(updated);
      this.setState({ typeTwo: typeTwo.filter((v) => v.id !== updated.id), typeThree });

Неизменяемый (правильный путь)

       this.setState({ typeTwo: typeTwo.filter((v) => v.id !== updated.id), typeThree: [...typeThree, updated] });