如何使用React hooks: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

这一总体思路可以放在以下几个方面：

export function useStateFromProp(initialValue) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => setValue(initialValue), [initialValue]);

  return [value, setValue];
}


function MyComponent({ value: initialValue }) {
  const [value, setValue] = useStateFromProp(initialValue);

  return (...);
}

Answer 2

useState（props）中的props值仅在初始渲染期间使用，使用settersetNameState进行进一步的状态更新。

此外，在更新派生状态时，不需要use效应：

const Person = props => {
  const [nameState, setNameState] = useState(props.name);
  // update derived state conditionally without useEffect
  if (props.name !== nameState) setNameState(props.name);
  // ... other render code
};

从React文档：

[...]您可以在渲染期间更新状态权限。React将在退出第一次渲染后立即用更新的状态重新运行组件，这样就不会很贵。

[...] 渲染期间的更新正是getDerivedStateFromProps在概念上一直以来的样子。

本质上，我们可以通过摆脱额外的浏览器重新绘制阶段来优化性能，因为use效应总是在渲染提交到屏幕后运行。

这是一个人为的例子，演示了上述模式——在实际代码中，您可以阅读道具。直接命名。有关更合适的派生状态用例，请参阅React博客文章。

const Person = props => {
  const [nameState, setNameState] = React.useState(props.name);
  // Here, we update derived state without useEffect
  if (props.name !== nameState) setNameState(props.name);

  return (
    <p>
      <h3>Person</h3>
      <div>{nameState} (from derived state)</div>
      <div>{props.name} (from props)</div>
      <p>Note: Derived state is synchronized/contains same value as props.name</p>
    </p>
  );
};

const App = () => {
  const [personName, setPersonName] = React.useState("Lui");
  const changeName = () => setPersonName(personName === "Lukas" ? "Lui" : "Lukas");

  return (
    <div>
      <Person name={personName} />
      <button onClick={changeName}>Change props</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>

Answer 3

useState钩子函数参数只使用一次，而不是每次prop更改时都使用。您必须使用use效应钩子来实现您所称的组件WillReceiveProps/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;