React表单预填充异常：输入框锁定、textarea无法回填问题

你的代码存在两个核心问题，直接导致预填充逻辑异常：

• useEffect未配置依赖数组，默认会在组件每一次重渲染后都执行。你每次在输入框敲字触发onChange更新状态时，组件重渲染就会立刻执行useEffect里的setName，把值重置回props传入的初始name，所以输入框看起来被锁死无法编辑。
• textarea标签没有绑定value属性和methodStepsList状态关联，属于非受控组件，你就算通过setMethodStepsList更新了状态，文本域也不会同步显示对应值，自然无法完成预填充。

1. 给useEffect添加正确的依赖项，同时增加空值判断，避免新建食谱场景下props.data为undefined时报错：

useEffect(() => {
  // 新建场景无传入数据时直接跳过赋值逻辑
  if (!props.data) return
  setName(props.data.name)
  setMethodStepsList(props.data.method)
}, [props.data]) // 仅在传入的食谱数据变化时执行一次赋值

2. 给textarea补充value绑定，让它成为受控组件，和状态双向同步：

<textarea
  rows="5"
  name="step_instructions"
  placeholder="Method will be split up based on new lines"
  value={methodStepsList}
  onChange={(e) => handleMethodChange(e)}
></textarea>

3. 校验handleMethodChange逻辑，确保输入时能正确同步状态，参考基础写法：

const handleMethodChange = (e) => {
  // 同步输入内容到状态
  setMethodStepsList(e.target.value)
  // 你原有的按换行拆分步骤的逻辑可保留在此处
}

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