Блог

Я пытаюсь обновить массив объектов, но даже если функции передаются правильные значения, массив остается пустым. Если я попытаюсь добавить второй объект, то каким-то образом будет добавлен первый, и я не уверен, что делаю неправильно.

  const [qualifications, setQualifications] = useState([{}]);

  function handleAddQualification(values: any) {
    console.log(values);

    console.log(qualifications);

    setQualifications((prev) => {
      return [...prev, values];
    });

    console.log(qualifications);
  }
 

Значения, которые я передаю, регистрируются правильно, и 2 последующих журнала квалификаций показывают пустой массив объектов.

Я упростил объект, поэтому на снимке экрана я добавил «один», и значение регистрируется правильно, но массив квалификаций остается пустым. Если я добавлю вторую запись «два», то по какой-то причине она добавит «один» в массив.

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

Вот пример того, как работает цикл событий 🙂

В вашем случае:

1. Зовущий handleAddQualification
2. Лог values , qualifications
3. Добавление setQualifications в очередь как асинхронная операция
4. Войдите qualifications снова с тем же результатом, что и на шаге 3
5. Здесь могут выполняться задачи из очереди, которая была добавлена ранее setQualifications
6. setQualifications Обновления qualifications

Взгляните сюда для лучшего понимания https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

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

1. Первый объект пуст, потому что вы определили его в состоянии по умолчанию, и вы обновляете свое новое состояние, используя предыдущее состояние, из-за этого пустой объект всегда остается первым элементом в массиве. Чтобы исправить это qualifications , установите свой

 interface Qual {
  subject?: string;
  level?: string;
  other?: string
}
 

 const [qualifications, setQualifications] = useState<Qual[]>([]);
 

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

 useEffect(() => { 
    console.log({qualifications});
}, [qualifications])