时间戳

首页 > 解决方案 > 如何在作为数组对象保存的表中呈现数据行？

javascript - 如何在作为数组对象保存的表中呈现数据行？

问题描述

所以我得到了一个 API 调用响应，它作为数组对象返回。我正在尝试制作一个表格，并让对象内每个数组中的每个数组值显示其信息。api 响应包含来自棒球比赛的每个球场的信息。https://github.com/zitrosolrac/AstrosApi 我尝试在数组上使用 map 函数，但我不确定如何在 render/return 调用中使用 map 函数。

属性 1 属性 2 属性 3 ....

1 球太空人...... . . ... . . . ... . . . ... . . . ...

标签： javascriptreactjs

解决方案

你的对象里面有键，它没有在你的代码中处理。如下更新您的 ApiDisplay.js，它将起作用

import React, { Component } from "react";

const ApiDisplay = ({ data }) => {
  console.log("data", data);
  //return null;
  return (
    <>
      {data &&
        Object.keys(data).map((key) =>
          Object.keys(data[key]).map((key1) => 
          <div key={data[key][key1].event_id}>
              <div>
                <h4>
                  <b>{data[key][key1].pitcher_name}</b>
                </h4>
                <p>{data[key][key1].batter_name}</p>
              </div>
            </div>
          )
        )}
    </>
  );
};

export default ApiDisplay;

我已经更新了你的代码框 https://codesandbox.io/s/peaceful-wright-u6t0n?file=/src/components/ApiDisplay.js

推荐阅读