React Table MUI Kitchen Sink切换JSON数据源后表格数据不显示问题排查

问题排查及解决方案 #

以下是该场景下的高频问题点及修复方案：

• 检查数据源绑定是否正确
  确认给React Table组件传递的data属性，是你切换后的目标数据源，不要仍绑定为测试用的data1。

• 修复异步数据源导致的state不更新问题
  你当前的data仅在组件首次渲染时初始化一次，如果NOTES是异步获取的数据源，首次渲染时NOTES为空会导致初始data是空数组，后续NOTES更新后data不会自动同步，按如下逻辑修改即可：

  // 给NoteList添加依赖项NOTES，仅当NOTES变化时才重新计算
  const NoteList = React.useMemo(() => {
    return Object.keys(NOTES).map(key => ({ ...NOTES[key], id: key }))
  }, [NOTES])
  
  // 监听NoteList变化，同步更新table用的data
  useEffect(() => {
    setData(NoteList)
  }, [NoteList])
  

• 逐字段校验accessor和数据源key的一致性
  不要仅通过console.log的折叠预览判断结构一致，展开每个字段确认key的拼写、大小写完全匹配：
  你代码中定义的accessor: 'submittionDate'存在常见拼写错误，标准拼写为submissionDate，大概率JSON数据源中是正确拼写，二者不匹配导致对应列渲染为空。
  同时确认其他字段比如licenseplate是否在JSON中为驼峰格式licensePlate，大小写差异也会导致取值失败。

• 校验字段类型匹配
  确认data中字段的类型和data1完全一致，比如id字段如果测试用的data1中是数字类型，你生成的data中id是字符串类型，部分自定义单元格组件如果做了严格类型判断，也会导致渲染异常。

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