Reactjs 在React.FC中使用默认值的窗体

我刚开始使用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>
  )
}

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

我觉得在这种情况下我没有做我应该做的事情，并且误解了在FC中重新渲染的工作原理，我环顾了一些示例，其中大多数示例只是具有空白默认值的表单，我无法真正从中找到我想要的

---

编辑：appologys我已经从代码中删去了太多内容，并对回调进行了深入研究

如果您的功能组件需要响应道具中的更改，那么它需要使用一个依赖于道具值的

useffect

挂钩。具有适当依赖关系数组的

useffect

相当于基于类的组件的

componentdiddupdate

生命周期方法

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

export const Form:React.FC=props=>{
const[title，setTitle]=React.useState（props.defaultValues.title）；
useffect（（）=>{
setTitle（props.defaultValues.title）；
}，[props.defaultValues.title]）；
const onChangeTitle=（事件：React.ChangeEvent）=>{
setTitle（event.target.value）
}
返回(
)
}

假定正在更新状态的

onChangeTitle

回调在哪里？功能组件仍然是react组件，因此呈现和组件生命周期与基于类的组件相同。有点不清楚你认为你的问题是什么。你到底想干什么？你能分享你的完整组件代码吗？很抱歉，我的问题不是我不能编辑输入，我的意思是我有一个我想通过这个组件更改的数据列表，当我想输入他们没有更新的当前数据值时，我现在会更清楚地编辑这个问题。谢谢你的帮助，这是正确的用例吗？我真的需要仔细阅读钩子，因为我还没有和它们打过交道，但我现在手头拮据，这真的很有帮助@是的。虽然在本地组件状态下存储传递的道具通常是一种反模式，但有一些用例是可以接受的，我认为更新表单字段的初始/默认值（在受控输入的情况下）是有效的用途之一。这是一种救生措施，我四处询问人们，他们经常不理我，告诉我你不应该这样做，没有人告诉我UseEffect，我在不熟悉的技术上有一个很短的最后期限，我感到绝望，谢谢你听我讲完。

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