React预填充数据库值的input输入框无法编辑修改如何解决

你当前的输入框值绑定了myData状态，但输入触发的onChange事件仅修改fields状态，myData始终未被更新，所以输入框内容不会跟随输入变化，呈现为无法修改的状态。

• 1. 后端数据返回后同步初始化fields状态
     原接口请求仅将数据存入myData，需要同时将数据赋值给表单绑定的fields状态，作为初始预填充值。
     修改后的useEffect代码如下：

  useEffect(() => {
    axios
      .post('/getDocToEdit', {id : idFromListServicesPage})
      .then((res) => {
        const data = res.data
        setMyData(data);
        // 同步给表单状态赋初始值
        setFields({
          updatedByCNUM: data.updatedByCNUM || "",
          content: data.content || "",
          site: data.site || ""
        })
        setIsLoading(true);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);
  

• 2. 修改输入框的value绑定对象
     将所有可编辑输入框的value属性从myData.xxx改为fields.xxx，让输入变化能实时同步到输入框显示。
     示例：

  {/* site输入框 */}
  <input
    type="text"
    value={fields.site} // 原myData.site改为fields.site
    onInput={(e) => onTyping(e.target.value)}
    onChange={handleInputChange}
    placeholder={myData.site}
    name="site"
    id="site"
  />
  
  {/* content输入框同理修改value */}
  <input
    type="text"
    value={fields.content} // 原myData.content改为fields.content
    onInput={(e) => onTyping(e.target.value)}
    onChange={handleInputChange}
    placeholder={myData.content}
    name="content"
    id="content"
  />
  

• 3. 修正updatedByCNUM输入框配置
     将只读的updatedByCNUM输入框的name改为对应字段名，同时绑定value为fields.updatedByCNUM，保证提交时能拿到正确值：

  <input
    type="text"
    value={fields.updatedByCNUM}
    name="updatedByCNUM"
    id="updatedByCNUM"
    readOnly
  />
  

• 4. 优化提交逻辑（可选）
     无需通过DOM操作拿输入值，直接读取fields状态即可，更符合React数据驱动的设计规范：

  const onClickEdit = (e, _id) => {
    e.preventDefault();
    const { site, content, updatedByCNUM } = fields
    editById(_id, site, content, updatedByCNUM);
  };
  

原代码中无参数调用editById的Edit按钮建议删除，避免误点时提交无效数据。

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