React.useStateは小道具から状態をリロードしません

Question 1

小道具の変更時に状態がリロードされることを期待していますが、これは機能せず、user変数は次のuseState呼び出しで更新されません。何が問題になっていますか？

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

codepen

Question 2

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>);
}

作業デモ

Question 3

useState変数に初期値を設定するために使用する機能コンポーネント。小道具を介して初期値を渡すと、useEffectフックを使用しない限り、常に同じ初期値が設定されます。

たとえばあなたの場合これはあなたの仕事をします

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

useEffectに渡された関数は、レンダリングが画面にコミットされた後に実行されます。

デフォルトでは、エフェクトはレンダリングが完了するたびに実行されますが、特定の値が変更された場合にのみエフェクトを起動するように選択できます。

React.useEffect(FunctionYouWantToRunAfterEveryRender)

useEffectに引数を1つだけ渡すと、レンダリングのたびにこのメソッドが実行されますFunctionYouWantToRunAfterEveryRender。useEffectに2番目の引数を渡すことで、これをいつ起動するかを決定できます。

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

お気づきのとおり、[props.user]を渡すuseEffectとFunctionYouWantToRunAfterEveryRender、props.userが変更された場合にのみこの関数が起動します

これがあなたの理解に役立つことを願っています改善が必要な場合は私に知らせてくださいありがとう

Question 4

渡されるパラメータはReact.useState()、その状態の初期値のみです。Reactは、状態の変更としてそれを認識せず、デフォルト値を設定するだけです。最初にデフォルトの状態を設定してから、条件付きでを呼び出しますsetUser(newValue)。これは新しい状態として認識され、コンポーネントを再レンダリングします。

状態が常に更新されないように、何らかの条件なしで状態を更新するように注意することをお勧めします。したがって、小道具を受け取るたびに再レンダリングします。状態機能を親コンポーネントに引き上げ、親の状態を小道具としてこのアバターに渡すことを検討することをお勧めします。

Question 5

フックに関するReactJSのドキュメントによると：

しかし、コンポーネントが画面に表示されているときに友達の小道具が変わるとどうなりますか？私たちのコンポーネントは、別の友達のオンラインステータスを引き続き表示します。これはバグです。また、unsubscribe呼び出しで間違ったフレンドIDが使用されるため、アンマウント時にメモリリークやクラッシュが発生します。

ここでの唯一のやりとりは、小道具の変更時に発生するはずですが、機能していないようです。（まだドキュメントによると）componentDidUpdate（prevProps）を使用して、小道具の更新をプロアクティブにキャッチすることができます。

PS：判断するのに十分なコードがありませんが、アバター（小道具）関数内でアクティブにユーザー（）を設定できませんでしたか？

Question 6

このような場合、react worldでは、componentWillRecieveProps（nextProps）関数で状態を更新する必要があります。