React.useState не перезавантажує стан з реквізиту

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

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

codepen

Аргумент, переданий 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 () всередині функції Аватар (props)?

У світі реакцій вам слід оновити свій стан у функції componentWillRecieveProps (nextProps), у таких випадках.