React Slate编辑器多次渲染后出现initialValue无效错误求助

1. 错误出现的原因 #

• 异步加载竞态/状态管理疏漏：用axios加载文档时，若组件因父组件状态变化、路由切换等原因多次渲染，可能出现请求未完成但组件已重新渲染的情况，此时initialValue被重置为undefined；或是useReducer的reducer逻辑中，某些action错误地将文档状态置为undefined，多次渲染触发该action后就会报错。
• 非空检查时机错误：虽然加了非空检查，但可能是在Slate组件渲染之后才执行，或是检查的变量和实际传给Slate的initialValue不是同一个引用，导致检查无效。
• 组件意外重挂载：如果给Slate或其容器组件设置了动态key，当key变化时组件会卸载重挂载，此时若initialValue还未加载完成（或被置为undefined），就会触发初始化错误——因为Slate的initialValue仅在首次挂载时生效，重挂载时会重新读取该值。
• 默认值缺失：初始化时可能仅在部分场景设置了initialValue，某些边缘场景（比如加载失败、空文档）没有兜底的默认结构，多次渲染进入这些场景时就会出现undefined。

2. 解决方法 #

（1）强制兜底默认文档结构 #

定义符合Slate要求的空文档默认值，无论何时传给Slate都先兜底：

// 定义默认空文档，符合Slate 0.67的格式要求
const DEFAULT_EMPTY_DOC = [{
  type: 'paragraph',
  children: [{ text: '' }]
}]

// 在Slate组件中使用时强制兜底
<Slate
  initialValue={yourInitialValue || DEFAULT_EMPTY_DOC}
  // 其他props...
>
  {/* 编辑器内容 */}
</Slate>

（2）严格控制异步加载时的渲染逻辑 #

在文档数据加载完成前，不要渲染Slate组件，或者渲染加载占位：

const [documentData, setDocumentData] = useState(null)
const [loading, setLoading] = useState(true)

useEffect(() => {
  axios.get('/api/doc')
    .then(res => {
      setDocumentData(res.data)
      setLoading(false)
    })
    .catch(err => {
      // 加载失败时也设置默认文档
      setDocumentData(DEFAULT_EMPTY_DOC)
      setLoading(false)
    })
}, [])

if (loading) {
  return <div>加载中...</div>
}

return (
  <Slate
    initialValue={documentData || DEFAULT_EMPTY_DOC}
    // 其他props...
  >
    {/* 编辑器内容 */}
  </Slate>
)

（3）修正useReducer的状态逻辑 #

检查你的reducer函数，确保所有action都不会将文档状态置为undefined，初始化state时就加入默认值：

const initialState = {
  document: DEFAULT_EMPTY_DOC,
  // 其他状态...
}

function editorReducer(state, action) {
  switch (action.type) {
    case 'LOAD_DOC':
      // 确保action.payload是有效的Slate文档结构，否则用默认值
      return { ...state, document: action.payload || DEFAULT_EMPTY_DOC }
    case 'UPDATE_DOC':
      return { ...state, document: action.payload }
    // 其他case...
    default:
      return state
  }
}

（4）避免不必要的组件重挂载 #

检查Slate组件或其容器的key属性，不要用可能频繁变化的变量作为key；如果必须用key控制重挂载，确保重挂载时initialValue已经是有效的文档结构：

// 错误示例：用可能变化的加载状态作为key，导致不必要重挂载
<Slate key={loading} initialValue={...}>...</Slate>

// 正确做法：仅在需要重置编辑器时才改变key，且此时确保initialValue有效
<Slate key={docId} initialValue={documentData || DEFAULT_EMPTY_DOC}>...</Slate>

（5）验证initialValue的有效性 #

在传给Slate前，加一层有效性校验，确保是符合要求的数组结构：

function isValidSlateValue(value) {
  return Array.isArray(value) && value.every(item => 
    typeof item === 'object' && item.children && Array.isArray(item.children)
  )
}

// 使用时
const safeInitialValue = isValidSlateValue(yourInitialValue) ? yourInitialValue : DEFAULT_EMPTY_DOC

<Slate initialValue={safeInitialValue}>...</Slate>

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