[解決済み] Reactフックを使ってpropsをstateに同期させる方法 : setState()

質問

ReactフックのsetState()で、コンポーネントが受け取るpropsを使って、状態を設定しようとしています。以下のコードで試してみました。

import React,{useState , useEffect} from 'react';

const Persons = (props) =>  {

    // console.log(props.name);

   const [nameState , setNameState] = useState(props)

   console.log(nameState.name);
   console.log(props.name);

   return (
            <div>
                <p>My name is {props.name} and my age is {props.age}</p>
                <p>My profession is {props.profession}</p>
            </div>
        )

}

export default Persons;

問題は、コンポーネントがロードされたときに状態が設定されることです。しかし、新しいpropsを受信したときに、状態が更新されません。この場合、どのように状態を更新するのでしょうか？よろしくお願いします。

どのように解決するのですか？

useState hooks関数の引数は一度だけ使われ、propが変わるたびに使われるわけではありません。そのため useEffect フックを使って componentWillReceiveProps/getDerivedStateFromProps 機能

import React,{useState , useEffect} from 'react';

const Persons = (props) =>  {
   const [nameState , setNameState] = useState(props)

   useEffect(() => {
       setNameState(props);
   }, [props])

   return (
            <div>
                <p>My name is {props.name} and my age is {props.age}</p>
                <p>My profession is {props.profession}</p>
            </div>
        )

}

export default Persons;