为什么React useState在parentLayer>0时无法正确设置默认值

问题根因 #

1. 组件实例复用导致状态未重置 #

你页面中存在多个EditForm子组件，若未给每个EditForm设置唯一key属性，React的Diff算法会默认复用同类型组件的已有实例：

• 首个渲染的是parentLayer=0的EditForm，此时传入的content有值，useState初始化正常
• 后续渲染parentLayer>0的EditForm时，React直接复用了之前的组件实例，useState的初始值仅在组件首次挂载时执行一次，因此不会使用新传入的content更新状态，就会出现默认值为空的情况

2. defaultValue特性限制 #

textarea的defaultValue仅在组件首次渲染时生效，后续即使组件props的content更新，defaultValue也不会同步变化，进一步加剧了默认值异常的问题。

3. 代码潜在问题 #

• 你提供的简化代码中handleEdit定义在EditForm组件外部，无法直接获取组件内部的parentLayer、setEditedContent等变量，属于结构放置错误
• 三元表达式返回多段JSX时没有用<></>（Fragment）包裹，属于语法错误，会导致React渲染异常
• 提交判断逻辑contentValue !== content存在类型错误：content是props传入的字符串，event.target.elements.content是DOM元素，二者对比永远返回true

修复方案 #

• 给每个EditForm添加唯一key，强制React渲染不同讨论项的表单时创建新的组件实例，触发useState重新初始化：

// 父组件渲染EditForm的位置调整
{discussionList.map(item => (
  <EditForm 
    key={item.discussionId} // 用讨论项的唯一ID作为key
    content={item.content} 
    parentLayer={item.parentLayer} 
  />
))}

• 若不想强制重建组件，可添加useEffect监听content变化，主动同步到组件状态：

const [editedContent, setEditedContent] = useState(content);
// 新增监听逻辑
useEffect(() => {
  setEditedContent(content);
}, [content]);

• 将textarea改为受控组件，避免defaultValue的生命周期限制：

<textarea 
  value={editedContent} 
  onChange={(e) => setEditedContent(e.target.value)} 
  required
/>

• 修正提交逻辑的判断条件，把handleEdit移到EditForm组件内部：

const handleEdit = async (event) => {
  event.preventDefault();
  const contentValue = editedContent; // 直接用受控组件的状态值
  if (contentValue !== content) await updateContent(contentValue);
  if (parentLayer === 0) {
    const { attachment } = event.target.elements;
    const attachmentValue = attachment.files[0];
    if (attachmentValue) await updateImg(attachmentValue);  
  }
};

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