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

Question

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

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

codepen

Answer 1

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

Answer 2

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

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

Answer 3

Аргумент, передаваемый 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>);
}

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

Answer 4

В соответствии с документацией ReactJS о крючках :

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

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

PS: у меня недостаточно кода, чтобы судить, но вы не можете активно установитьUser () внутри вашей аватары (реквизит) функция?