React中从服务端加载数据赋值给CKEditor出现非受控转受控错误如何解决

问题原因 #

报错的核心原因是CKEditor的data属性值出现了从null到字符串的跳变：React会将初始传入undefined/null的输入类组件判定为非受控组件，后续当你传入明确的字符串值时，组件切换为受控模式，就会触发该警告。

解决方案 #

按以下步骤修改即可：

1. 修改状态初始值
   将contentEditor的初始值从null改为空字符串，从组件生命周期初始阶段就保持受控模式：

// 修改前
const [contentEditor, setContentEditor] = useState(null);
// 修改后
const [contentEditor, setContentEditor] = useState('');

2. 增加接口返回值兜底
   避免接口返回的data.content.text为undefined的异常情况，赋值时增加空值兜底：

if(data.status === 1){
    setitem(data.content);
    setContentEditor(data.content.text || '');
}

3. 可选优化：加载状态兜底
   在接口请求未完成时不渲染CKEditor，避免初始状态异常：

{
  isLoading ? <div>内容加载中</div> : 
  <CKEditor
    editor={ ClassicEditor }
    data={contentEditor}
    onReady={editor=>{}}                                
    onChange={ ( event, editor ) => {
         const data = editor.getData();
         setContentEditor(data);
    } }
 />
}

另外补充代码问题修正：你当前在useEffect的catch分支中返回JSX是无效的，异步函数的返回值不会渲染到组件视图中，建议新增error状态存储错误信息，再在渲染逻辑中判断展示错误提示。

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