React中如何将props设为useState默认值并实现输入框双向绑定

你的核心问题是输入框的显示值和状态变量没有正确绑定，导致修改后状态不更新，或者初始值无法加载。这里给你两种可行的解决思路：

方法一：用post.title作为状态初始值+监听post变化更新状态 #

这是最直接的方案，让状态变量和输入框双向绑定，同时在切换编辑文章时自动同步最新的文章标题：

1. 初始化状态时传入post.title作为默认值：

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

2. 添加useEffect监听post的变化，当切换到另一篇文章时自动更新状态：

import { useEffect } from 'react';

// ...

useEffect(() => {
  // 每次post改变时，把标题同步到状态里
  setTitle(post.title);
}, [post]); // 依赖数组里放post，确保post变化时触发

3. 把TextField的value绑定到状态变量title：

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

这样做的逻辑是：

• 进入编辑模式时，状态初始化为当前文章的标题，输入框自动填充
• 修改输入框时，onChange会同步更新状态变量title
• 切换编辑的文章时，useEffect会自动把新文章的标题同步到状态，输入框也会跟着更新
• 提交时直接用title变量即可，后续可以通过PUT请求把它保存到JSON文件

方法二：处理post未加载的边界情况 #

如果组件初始化时post可能还没获取到（比如异步加载文章数据），可以把状态初始值设为空字符串，再在useEffect里判断后更新：

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

useEffect(() => {
  if (post) { // 确保post存在再更新状态
    setTitle(post.title);
  }
}, [post]);

TextField的写法和方法一一致，这样能避免post为undefined时出现报错。

内容的提问来源于stack exchange，提问作者postmetric