如何使用React挂钩将道具同步到状态：setState（）

Question

我正在尝试使用组件接收的道具使用React hook setState（）设置状态。我尝试使用以下代码：

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;

问题是加载组件时正在设置状态。但是，当它收到新的道具时，状态不会更新。在这种情况下如何更新状态？提前致谢。

Answer 1

useStatehooks函数参数仅使用一次，而不是每次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;