时间戳

首页 > 解决方案 > 数据未在表格中正确显示

javascript - 数据未在表格中正确显示

问题描述

我试图在表格中显示数据，但由于某些原因出现空字段。我认为问题在于首先是寻找死亡 - 填充元素并且案件变成空的。尝试了许多不同的方式。在某些方面，所有数据都只是在一列中提取，而在其他方面，数据只是按行排列。也尝试使用 lodash。当前代码：

 <table className="table">
          <tr>
            <th>Cases</th>
            <th>Deaths</th>
          </tr>
          {_.map(countryData, (item, key) => {
            if (item.indicator === "cases") {
              return (
                <tr>
                  <td>{item.weekly_count}</td>
                  <td></td>
                </tr>
              );
            } else {
              return (
                <tr>
                  <td>{item.weekly_count}</td>
                </tr>
              );
            }
          })}
        </table>

也尝试过这种方式（仍然是空字段）：

 {countryData.map((value, key) => {
            return (
              <tr>
                <td>
                  {value.indicator === "cases" ? value.weekly_count : null}
                </td>
                <td>
                  {value.indicator === "deaths" ? value.weekly_count : null}
                </td>
              </tr>
            );
          })}

我来自 console.log 的数据： 数据

预期结果：预期结果

问题示例：问题

countryData：此数据来自选择特定国家/地区后

标签： javascriptreactjslodash

解决方案

地图功能工作得很好。问题出在对象countryData上。该对象当前不包含数组。请确保对象看起来像：

countryData = [{indicator:"cases", weekly_count: xx}, {indicator:"deaths", weekly_count: yy}.....]

我只在每个对象中使用了两个字段，您可以根据需要添加更多对象。

为了将病例和死亡作为单独的列查看，请在显示“死亡”之前添加一个空单元格。

{_.map(countryData, (item, key) => {
            if (item.indicator === "cases") {
              return (
                <tr>
                  <td>{item.weekly_count}</td>
                  <td></td>
                </tr>
              );
            } else {
              return (
                <tr>
                  <td></td>
                  <td>{item.weekly_count}</td>
                </tr>
              );
            }
          })}

推荐阅读