在 React.FC 中具有默认值的表单

Question

我是使用 React.FC 的新手，并且一直在使用 redux，所以我不熟悉 React 本身的生命周期，但由于项目限制而无法使用它们，所以请帮助我。

我有一个作为 React.FC 组件的表单，它将在创建新内容和编辑时使用，我控制父状态中默认值的默认值并将它们作为道具传递。

export const Form: React.FC<Props> = props => {

  const [title, setTitle] = React.useState(props.defaultValues.title)

  const onChangeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(event.target.value)
  }



  return (
  <div>

                  <input
                    type="text"
                    value={title}
                    onChange={onChangeTitle}
                  />

    </div>
  )
}

问题是当我将新的默认值传递给组件以更新它们时，标题不会出现在输入中，表单输入不会相应更新，我放了一个

console.log(title)

在 const 声明的正下方，查看它们是否已正确更新，只是它们没有显示在输入值中。

我觉得在这种情况下我没有做我应该做的事情并且误解了重新渲染在 FC 中的工作原理，我查看了示例，其中大多数只是具有空白默认值的表单，我真的找不到我想要的东西。

编辑：我已经从代码中删减了太多并删除了回调

Answer 1

如果你的功能组件需要响应 props 的变化，那么它需要使用一个 useEffect 挂钩，并依赖于 prop 的值。带有适当依赖数组的useEffect 等效于基于类的组件的componentDidUpdate 生命周期方法。

export const Form: React.FC<Props> = props => {
  const [title, setTitle] = React.useState(props.defaultValues.title);

  useEffect(() => {
    setTitle(props.defaultValues.title);
  }, [props.defaultValues.title]);

  const onChangeTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(event.target.value)
  }

  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={onChangeTitle}
      />
    </div>
  )
}