reactjs - 如何在 React Hooks 中更改 props 到 state？

Question

在简单的 react 类组件中，我们用来更改 Prop 以这样的方式声明:

constructor(props) {
    super(props)

    this.state = {
      pitch: props.booking.pitch,
      email: props.booking.email,
      firstName: props.booking.firstName,
      arrivalDate: props.booking.arrivalDate
    }
} 

但是我不知道如何在 Hooks 这样的新功能中做到这一点，但我正在尝试这样做。

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

useEffect(() => {
    setDescription(initialDesc)
  }, {})

 function handleChangeVariance(newVariance) {
    setDescription({
      ...description,
      template: {
        ...description.template,
        variance_name: newVariance,
      },
    })
  }

}

基本上，我只需要更改来自另一个父组件的描述 Prop 即可转换为状态。请问，您能告诉我如何以 Hooks 的新方式进行操作吗？

Answer 1

您的代码中的问题在于 {}。UseEffect 钩子(Hook)需要数组，而不是对象。请改用[initialDesc]。

这是在 props 更改时重置组件状态的方法

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

  useEffect(() => {
    setDescription(initialDesc)
  }, [initialDesc]);
}

这是仅在第一次渲染时将组件状态初始化为 prop 值的方法

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc);
}