Django+React笔记应用更新表单出现未知额外字段求助

核心问题分析 #

你遇到的额外字段问题，根源在两处代码问题：

1. useEffect 未设置依赖数组，导致组件每次渲染都重复发起请求，状态反复更新引发组件频繁重渲染，DOM出现重复元素
2. 表单字段的外层div使用了动态变化的title/content作为key，状态更新时key改变，React会重新创建DOM节点而非更新，导致重复渲染出额外字段

修复步骤 #

1. 修复useEffect的依赖数组

修改初始化数据的useEffect，添加noteId作为依赖，确保仅在路由参数变化时才发起请求：

useEffect(() => {
  fetch(`/api/notes/update/${noteId}/`)
  .then(res => res.json())
  .then(json => {
      setTitle(json.title)
      setContent(json.content)
  })
}, [noteId]) // 仅当noteId变化时执行该副作用

2. 替换动态key为固定唯一标识

将包裹表单字段的div的key改为固定值，避免状态变化触发DOM重建：

<form onSubmit={(e) => e.preventDefault()}> {/* 阻止表单默认提交行为，避免页面刷新 */}
    <div key="title-field"> {/* 固定唯一key */}
        <div className='flex-center-left-right'>
            <div className={`form form__underline`}>
                <input ref={titleRef} defaultValue={title} type={'text'} placeholder=" " id={'title'} className={`form__input form__underline__input`} />
                <label className={`form__label form__underline__label`} htmlFor={'title'}>Note Title</label> {/* React中label用htmlFor替代原生for */}
            </div>
        </div>
    </div>
    <div key="content-field"> {/* 固定唯一key */}
        <div className='flex-center-left-right'>
            <div className={`form form__underline`}>
                {/* 可选优化：笔记内容用textarea更适配长文本输入 */}
                <textarea 
                  ref={contentRef} 
                  defaultValue={content} 
                  placeholder=" " 
                  id={'content'} 
                  className={`form__input form__underline__input`}
                ></textarea>
                <label className={`form__label form__underline__label`} htmlFor={'content'}>Note Content</label>
            </div>
        </div>
    </div>
</form>

验证效果 #

修改后重新运行项目，额外字段会消失，表单渲染稳定，提交行为也能正常工作。

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