使用 useState Hook 时根据 prop 设置初始状态答案

【问题标题】：Setting initial state based on prop when using useState Hook使用 useState Hook 时根据 prop 设置初始状态
【发布时间】：2019-06-13 06:23:01
【问题描述】：

我正在尝试将子组件的初始状态设置为父组件传递的 prop 值。

export default (props) => {
  const myValueFromProp = props;
  const [myValue, setMyValue] = useState(myValueFromProp);

  return (
    <Text>
     {myValue}
    </Text>
  );
};

上面是我想出的代码。我很困惑这是否是我应该遵循的正确方法。

在这个特定组件中有更多基于状态的逻辑为简单起见，我省略了。

【问题讨论】：

你可以通过像
在这个特定组件中有更多基于状态的逻辑，为了简单起见，我省略了。
是的，这是正确的方法。
初始状态是你在useState 函数中传递的，所以是的！你做得对。您将道具设置为状态是否有原因？
我的项目是一个 React Native 项目。我实际上是在屏幕之间导航时尝试将参数作为道具传递。第二个屏幕将有一些逻辑，例如数据获取，查看某些组件等基于从第一个屏幕传递的道具。一旦第二个屏幕被渲染，它将不再依赖于第一个屏幕传递的道具。这是因为第一个屏幕是我们导航离开的地方，因此除非我们按下返回，否则它不再存在。

标签： reactjs react-native react-hooks

【解决方案1】：

你需要考虑两件事。

您需要将道具作为状态存储在子组件中吗？（如果 state 可以直接为 props 派生，你可能不需要它，因为你可以直接使用 props）
如果 props 发生变化，是否需要更新 state？

一旦你回答了这两个问题，你需要更新useEffect中的状态

export default (props) => {
  const myValueFromProp = props;
  const [myValue, setMyValue] = useState(myValueFromProp);
  useEffect(() => {
     setMyValue(props);
  }, [...props])
  return (
    <Text>
     {myValue}
    </Text>
  );
};

【讨论】：

队友为什么会这样？我想当新的props 到达时，我的组件的逻辑将被重新执行，useState 将再次以新值触发
@godblessstrawberry 仅当 props 的引用发生变化时