React Table数组为空时全部表格不渲染的问题及修复方案

我来帮你搞定这个问题！咱们先拆解下问题根源，再一步步修复：

问题出在哪？ #

你当前的ResponseTable组件里，columnsBuilder方法有两个致命问题：

1. 判断数组为空的逻辑完全错误：if(this.props.data == 0)——空数组是[]，和0不相等，这个判断根本不会触发。
2. 当data是空数组时，this.props.data[0]会是undefined，调用Object.keys(undefined)直接抛出错误，导致整个组件崩掉，连累所有表格都没法渲染。

修复方案 #

修改columnsBuilder方法，正确识别空数组，返回一个仅包含表头的结构，避免访问不存在的data[0]：

columnsBuilder () {
  // 正确判断数组是否为空
  if(this.props.data.length === 0) {
    return [{ Header : this.props.header }];
  }
  const props = Object.keys(this.props.data[0]);
  const columns = props.map( (item, index) => ({
    Header : item,
    accessor : item,
  }));
  const built = [
    {
      Header : this.props.header,
      columns,
    },
  ];
  return built;
}

额外的健壮性优化 #

为了避免后续踩坑，建议在父组件处理数据时也做一层兜底，确保每个过滤后的数组始终是合法数组：

// 以issuesCompletedInAnotherSprint为例
const filteredIssuesCompletedInAnotherSprint = Array.isArray(this.state.issuesCompletedInAnotherSprint) 
  ? this.state.issuesCompletedInAnotherSprint.map(item => ({
      assignee: item?.assigneeName || 'Empty',
      id: item?.id || 'Empty',
      key: item?.key || 'Empty',
      type: item?.typeName || 'Empty',
      summary: item?.summary || 'Empty',
    }))
  : [];

这里用Array.isArray判断数据源是否为数组，用可选链?.简化空值判断，代码更简洁也更安全。

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