为什么我的 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 的站点，对于未完成的界面感到抱歉：

编辑时，只能看到父层有默认值：

为什么 React 有这样的行为？

已更新：
我的 React 程序结构：

Mainpage => discussion page => 通过计算得到parentLayer值=> 当parentLayer === 0时渲染最上面的讨论块，否则渲染其余的讨论块。 top块或rest块是否有editform组件。

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

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

Answer 1

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

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

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

每次父组件的内容发生变化时，editform 子组件将保持相同的状态。

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


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

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

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

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

Why my useState doesn't set default value

html

css

reactjs

use-state