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

Question

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

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

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

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

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

Answer 1

你需要考虑两件事。

1. 您是否需要将 props 作为 state 存储在子组件中？（如果 state 可以直接为 props 推导，你可能不需要它，因为你可以直接使用 props）
2. 如果 props 改变，你需要更新 state 吗？

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

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