点击编辑按钮时Note-Info表单无法自动填充问题求助

问题根因及修复方案 #

• 你提供的useEffect存在依赖项配置错误：你将需要在effect内部更新的date状态加入了依赖数组，会导致effect无限循环触发：每次请求完成更新date后，依赖项变化会再次触发effect拉取数据，频繁的状态更新可能导致表单值无法正常渲染，甚至出现竞态问题。
• 请同步排查以下两个常见问题：
  1. 检查表单控件是否正确绑定了对应的状态值，例如<input value={title} onChange={e => setTitle(e.target.value)} />，如果缺失value绑定，状态更新不会同步到表单展示层
  2. 可在请求回调中打印返回的data对象，确认接口返回的字段名和你赋值的字段完全匹配，比如是否存在后端返回updated_time而你取了updatedAt这类拼写错误

修复后的代码示例 #

useEffect(() => {
  const fetching = async () => {
    try {
      const { data } = await axios.get(`/api/notes/${match.params.id}`);
      // 可临时加一行打印确认返回数据是否正确
      // console.log('接口返回笔记数据：', data)
      setTitle(data.title);
      setContent(data.content);
      setCategory(data.category);
      setDate(data.updatedAt);
    } catch (err) {
      console.error('拉取笔记详情失败：', err)
    }
  };

  fetching();
// 仅保留match.params.id作为依赖，id变化时才重新拉取对应笔记数据
}, [match.params.id]); 

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