将 prop 设置为 useState 钩子的默认值 ReactJS

Question

我正在使用 React 和 MaterialUI 构建一个博客，其中包含一个显示所有帖子的页面。 我的目标是能够单击一个按钮来打开“编辑器模式”。 我有按钮工作，编辑器模式成功打开。 当编辑器打开时，用户可以选择编辑标题、图像 url 和类别。 如果用户进入编辑模式，我希望文本字段填充当前帖子的标题。 编辑标题后，我想使用 PUT 方法将其保存到 JSON 文件中。 但是，现在我的目标只是将标题设置为 useState 变量。

const [title, setTitle] = useState('');

<TextField label="Post title" variant="outlined" value={post.title} onChange={(e) => setTitle(e.target.value)} fullWidth required />

现在 {post.title} 的值填充文本字段，但 useState 挂钩在单击提交按钮后不会更新新数据（如果更改）。 我知道文本字段的值必须是 state 值标题，但这并没有将文本字段设置为当前值。

有没有办法将默认的 state 设置为文本字段的 {post.title} 值？ 如果没有，还有另一种方法吗？

Answer 1

您正在对值进行硬编码并且它不会改变，因为 post.title 永远不会改变。 你应该这样定义你的 state

const [title, setTitle] = useState(post.title);

并将标题作为输入值传递。