时间戳

首页 > 解决方案 > 如何在 React Hooks 中将 props 更改为 state？

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

问题描述

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

}

基本上，我只需要更改描述道具，这些道具来自另一个父组件以转换为状态。请问，你能告诉我如何以 Hooks 的新方式来做吗？

标签： reactjsreact-hooks

解决方案

您的代码中的问题在于{}. UseEffect 钩子期望和数组，而不是对象。改为使用[initialDesc]。

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

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

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

这是您仅在第一次渲染时将组件状态初始化为道具值的方式

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

推荐阅读