Блог

Главная - Вопросы по программированию - Состояние реакции обновлено в дочернем компоненте, но не в родительском

Состояние реакции обновлено в дочернем компоненте, но не в родительском

#reactjs

#реагирует на

Вопрос:

Я знаю, что изменение состояния является асинхронным и требует использования предыдущего состояния. Но в последнее время я столкнулся со странной проблемой. После изменения состояния изменение отображается в дочернем (фактически, внучатом) компоненте, но во время обратного вызова родителю изменение там не отображается. Вот псевдокод

 const Parent = () =gt; {  const [items, setItems] = React.useState([]);    ... some method  const changeState = (...) =gt; {  setItems( items =gt; [...items, {id: 100, value: "Test"}]);  }   const callback = (id) =gt; {  const v = items.find( i =gt; i.id == id ); // ERROR: v is undefined  }   return(lt;Child items={items} callback={callback} /gt;); }  const Child = ({items, callback) =gt; { ...  const onClick = () =gt; {  callback(100);  } ... }

Сценарий выглядит следующим образом:

  1. Метод changeState вызывается в родительском
  2. ребенок отображается с правильными данными
  3. когда элемент отображается, у него есть метод onClick с его идентификатором в качестве параметра
  4. onClick в дочернем называется
  5. обратный вызов вызывается у родителя с идентификатором (который был передан от родителя к ребенку).
  6. есть ошибка, потому что … идентификатор не существует в родительском состоянии.

Есть идеи, где искать источник проблемы?

Комментарии:

1. в комментарии , который вы сказали ERROR: v is undefined , вы имели в виду id is undefined ?

2. Нет. Идентификатор передан правильно, но при обратном вызове в переменной состояния для этого идентификатора данные не найдены 🙁

3. Кроме того, это своего рода условие гонки. Эта проблема случается, но не является постоянной!

4. Не очень ясно, что может быть причиной проблемы. Я не вижу никаких очевидных проблем с опубликованным кодом. Возможно ли для вас воспроизвести проблему, с которой вы столкнулись, с помощью чего-то вроде песочницы кода?

Ответ №1:

Я полностью согласен с шахматами

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

Одна вещь, о которой я подумал: может быть, setItems функция вызывается откуда-то еще? Это могло бы объяснить странное поведение.

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

Метки: ,