为什么我的 useState 没有设置默认值

Question

我的代码（简化版）：

  const handleEdit = async (event) => {
    event.preventDefault();
    if (parentLayer === 0) {
      const { content, attachment} = event.target.elements;
      let contentValue = content.value;
      setEditedContent(contentValue);
      let attachmentValue = attachment.files[0];
      if (contentValue !== content) await updateContent(contentValue);
      if (attachmentValue !== undefined && parentLayer === 0) await updateImg(attachmentValue);  
    } else {
      const { content } = event.target.elements;
      let contentValue = content.value;
      setEditedContent(contentValue);
      if (contentValue !== content) await updateContent(contentValue);
    }
  };


const EditForm = (props) => {
  const { content, parentLayer } = props;

  const [editedContent, setEditedContent] = useState(content);

  <div className='discussion'>
    <form className='edit-discussion' onSubmit={handleEdit}>

      {parentLayer === 0
         ?
          // Can update img
          <input type='file' id='files' name='attachment'/>
          <textarea defaultValue={editedContent} required/>
          <button type='submit' value='Submit'>submit</button>
         :
          <textarea defaultValue={editedContent} required/>
          <button type='submit' value='Submit'>submit</button>
   </form>
  </div>


}

问题是，当 parentLayer === 0 时，editedContent 默认为来自 props 的 {content}，

如果 parentLayer > 0，editedContent 为空字符串， 但我使用控制台检查了 {content} 的值是否正确。

我的问题，为什么 useState 不能在第二个条件下设置默认值。

为了更好的理解我的程序截图：

类似 Reddit 的网站，对未完成的界面表示抱歉：

编辑的时候可以看到只有父层有defaultValue：

为什么 React 会有这样的行为？

更新：
我的 React 程序结构：

Mainpage => 讨论页 => 通过计算得到 parentLayer 值 => 当 parentLayer === 0 时渲染顶部讨论块，否则渲染其余讨论块。 top block 或者 rest block 是否有editform组件。

也就是说，React 只会渲染一个页面组件，但会渲染多个 editform 子组件。

通过完整的视觉设计， 就像 Reddit（抱歉未完成的设计）：

Answer 1

对不起，我的问题不够清楚，但我可能会找到这些行为背后的原因：

{content} 是一个道具，并且根据 https://learnwithparam.com/blog/how-to-pass-props-to-state-properly-in-react-hooks/

''useState 不会在 props 更改时初始化。''

每次父组件的内容发生变化时，editform子组件的状态都会保持不变。

我如何解决我的问题（仅更改部分）：

const [editedContent, setEditedContent] = useState('');

  useEffect(() => {
    setEditedContent(content);
  }, [content]);

然后每次创建新层时组件都会重新渲染。