如何在React Hooks中将道具更改为状态？

Question

在简单的React类组件中，我们用来更改props以这种方式声明：

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,
      },
    })
  }

}

基本上，我只需要更改描述道具，该道具来自另一个父组件以变为状态。请问，我能告诉我如何以新的方式像胡克斯一样去做吗？

Answer 1

您的代码中存在问题{}。UseEffect挂钩期望和数组，而不是对象。使用[initialDesc]代替。

这是在道具更改时重置组件状态的方式

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

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

这是您如何在仅首次渲染时将组件状态初始化为prop值的方式

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

Answer 2

您可以将初始状态作为第一个参数传递给useState：

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

  ...