React.useState не перезагружает состояние из реквизита

Я ожидаю, что состояние перезагрузится при изменении реквизита, но это не работает, и userпеременная не обновляется при следующем useStateвызове, что не так?

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

кодовый ключ

Аргумент, переданный в useState, является начальным состоянием, очень похожим на состояние установки в конструкторе для компонента класса, и не используется для обновления состояния при повторной визуализации.

Если вы хотите обновить состояние при изменении свойства, используйте useEffectкрючок

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

Рабочая демонстрация

Функциональные компоненты, в которых мы используем useStateдля установки начальных значений нашей переменной, если мы передаем начальное значение через реквизиты, оно всегда будет устанавливать одно и то же начальное значение, пока вы не используете useEffectловушку,

например, в вашем случае это сделает вашу работу

 React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

Функция, переданная в useEffect, будет запущена после фиксации рендеринга на экране.

По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете активировать их только при изменении определенных значений.

React.useEffect(FunctionYouWantToRunAfterEveryRender)

если вы передадите только один аргумент для useEffect, он будет запускать этот метод после каждого рендеринга, вы можете решить, когда его запускать FunctionYouWantToRunAfterEveryRender, передав второй аргумент в useEffect

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

как вы заметили, я передаю [props.user], теперь useEffectэта FunctionYouWantToRunAfterEveryRenderфункция будет запускаться только при props.userизменении

Надеюсь, это поможет вам понять, дайте мне знать, если требуются какие-либо улучшения, спасибо

Переданный параметр React.useState()- это только начальное значение для этого состояния. React не распознает это как изменение состояния, а только устанавливает значение по умолчанию. Сначала вы захотите установить состояние по умолчанию, а затем условно вызвать setUser(newValue), которое будет распознано как новое состояние, и повторно отрендерить компонент.

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

Согласно документации ReactJS о хуках :

Но что произойдет, если реквизит друга изменится, пока компонент находится на экране? Наш компонент продолжит отображать онлайн-статус другого друга. Это ошибка. Мы также могли бы вызвать утечку памяти или сбой при размонтировании, так как при вызове отказа от подписки использовался неправильный идентификатор друга.

Единственное ваше взаимодействие здесь должно происходить при смене реквизита, которая, похоже, не работает. Вы можете (все еще согласно документу) использовать componentDidUpdate (prevProps) для упреждающего отслеживания любых обновлений для реквизита.

PS: У меня недостаточно кода, чтобы судить, но не могли бы вы активно установить User () внутри своей функции Avatar (props)?

В таких случаях в мире реакции вы должны обновить свое состояние в функции componentWillRecieveProps (nextProps).