React.js 调用API获取数据渲染表格时TBody数据行无法显示问题

问题排查与修复方案 #

以下是导致你数据无法正常渲染的常见原因及对应修改方案：

• 状态初始化错误
  请确认你组件的初始state中data被设置为空对象{}，dataIsNull初始值为true。如果初始data为null/undefined，执行Object.keys(data)会直接抛出JS错误，导致页面白屏无法展示。
• 异步请求回调逻辑错误
  请确认你API请求成功的回调函数中，同时更新了两个state字段：

  // 接口请求成功后执行
  this.setState({
    data: 接口返回的完整数据,
    dataIsNull: Object.keys(接口返回的完整数据).length === 0
  })
  

• 数据结构兼容不足
  你当前代码默认所有国家数据下都存在All字段，若接口返回的某个国家不存在该字段，读取属性会直接报错，需要增加兜底判断避免报错。
• 现有代码冗余&格式错误
  1. 你已经在map中拿到了index索引，无需再执行dataArray.indexOf(tempData)获取序号，该方法性能差且存在重复数据时会返回错误序号
  2. 空状态的行只有1个单元格，和表头11列不匹配，会导致表格样式错乱，需要加colspan属性占满整行

修复后的render代码 #

render() {
    const { data, dataIsNull } = this.state;
    const countries = Object.keys(data);
    const dataArray = countries.map(country => data[country]?.All ?? {});

    return (
      <div className="content">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>Country Name</th>
              <th>Capital City</th>
              <th>Continent</th>
              <th>Location</th>
              <th>Abbreviation</th>
              <th>Confirmed Patients</th>
              <th>Death Patients</th>
              <th>Population</th>
              <th>Life Expectancy</th>
              <th>Updated Time</th>
            </tr>
          </thead>
          <tbody>
            {
              !dataIsNull ? dataArray.map((tempData, index) => {
                return (
                  <tr key={"row" + index}>
                    <td>{index + 1}</td>
                    <td>{tempData.country ?? '-'}</td>
                    <td>{tempData.capital_city ?? '-'}</td>
                    <td>{tempData.continent ?? '-'}</td>
                    <td>{tempData.location ?? '-'}</td>
                    <td>{tempData.abbreviation ?? '-'}</td>
                    <td>{tempData.confirmed ?? '-'}</td>
                    <td>{tempData.deaths ?? '-'}</td>
                    <td>{tempData.population ?? '-'}</td>
                    <td>{tempData.life_expectancy ?? '-'}</td>
                    <td>{tempData.updated ?? '-'}</td>
                  </tr>
                );
              }) : <tr><td colSpan="11">Empty</td></tr>
            } 
          </tbody>
        </table>
      </div>
    )
  }

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