React+GraphQL/Apollo项目受控输入转非受控错误求助

你遇到的错误核心原因是受控组件的value属性从确定的字符串变成了undefined。在你的代码里，当Apollo的useQuery还在加载（loading为true）或者返回的contentById中contentHead/contentText字段不存在时，你会把状态设置为undefined，导致表单控件从受控（有明确value）变成非受控（value为undefined）。

具体问题点 #

1. 初始contentHead和contentText为空字符串，此时控件是受控状态；但当data加载完成后，若contentById的某个字段为undefined，setContentHead(content.contentHead)会把状态改成undefined，触发错误。
2. useEffect的依赖数组中包含setContentHead和setContentText，这两个是useState返回的稳定函数，无需加入依赖，反而可能导致不必要的重复执行。

解决方案 #

1. 设置状态时兜底为空字符串

修改useEffect逻辑，确保即使字段不存在，状态也保持为字符串类型：

useEffect(() => {
  const content = data?.contentById || {};
  // 用空字符串兜底，避免undefined传入状态
  setContentHead(content.contentHead || '');
  setContentText(content.contentText || '');
}, [data]); // 移除不必要的setContentHead、setContentText依赖

2. 处理loading状态，避免提前渲染表单

在数据加载完成前，显示加载提示，避免未初始化的状态传入控件：

if (loading) {
  return <div>Loading...</div>;
}

// 额外处理内容不存在的情况
const content = data?.contentById;
if (!content) {
  return <div>Content not found</div>;
}

return (
  // 原表单渲染代码
);

补充说明

你之前尝试修改ReactQuill的onChange写法是错误的，ReactQuill的onChange回调直接返回编辑器内容字符串，当前onChange={setContentText}的写法是正确的，无需改成e.target.value。

内容的提问来源于stack exchange，提问作者Stephen Scott Moore