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

Question

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

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

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

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

Answer 1

您需要考虑两件事：

1. 是否需要将 props 作为状态存储在子组件中？
   如果状态可以直接从 props 派生，你可能根本不需要它——只需直接使用它们：

   export default (props) => <Text>{props.myValue}</Text>
   

2. 如果道具发生变化，是否需要更新状态？

如果两个问题的答案都是"是"，则需要在useEffect中更新状态：

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