在 React 中从 JSON 数据创建一个表答案

【问题标题】：Make a table from JSON data in React在 React 中从 JSON 数据创建一个表
【发布时间】：2022-01-10 22:33:59
【问题描述】：

我想做这样的事情：

假设我有两个数组：

names: ["Prisma 2 Case", "PP-Bizon", ...]
imgs: ["img1.png", "img2.png", ...]

一张有名字，一张有图片。我想做的是一张在一个单元格中包含图像和名称的表格。

我尝试过这样的事情：

<table className="table">
  <tbody>
    <tr>
      {this.state.names.map((data, i) => {
        return <th key={i}>{data}</th>;
      })}
    </tr>
    <tr>
      {this.state.imgs.map((data, i) => {
        return (
          <td key={i}>
            <img className="style" src={data} alt="" />
          </td>
        );
      })}
    </tr>
  </tbody>
</table>;

但它所做的是两个单独的行。它必须通过一些循环，因为拥有的项目的数量并不总是相同的。

感谢您的回答。

【问题讨论】：

您拥有的 json 数据是否有办法修复它让我们这样说[{name: "Prisma 2 Case" image: "img1.png"}, {name: "PP-Bizon" image: "img2.png"}, ...]
如果数组大小相等...在映射名称时使用i 索引来渲染图像...names.map(name,i){ {render name} ... {render img using imgs[i] } }

标签： javascript reactjs json

【解决方案1】：

我认为解决这个问题最简单的方法是创建一个数组，这个数组的每个对象都有一个由名称和图像字段组成的对象。然后使用 map 并显示这个新数组。

arr = [{name:'',image:''}]

【讨论】：

【解决方案2】：

您只需要一个循环即可实现您正在寻找的内容。根据您要执行的操作和您的风格，您可能需要使用 span 来包装名称。

请注意，这仅在您的两个数组具有相同长度且排序相同时才有效（即第一个图像用于名字，依此类推）。

<table className="table">
  <tbody>
    <tr>
      {this.state.names.map((data, i) => {
        return (
          <td key={i}>
            <img className="style" src={this.state.imgs[i]} alt="" />
            {data}
          </td>
        );
      })}
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

我认为这是您正在做的项目所需要的，希望对您有所帮助，提示最好将您的 json 数据制作成类似 [{name: "Prisma 2 Case" image: "img1.png"}, {name: "PP-Bizon" image: "img2.png"}, ...]

如果这里出了问题，请告诉我。

import React from "react";

function Sample() {
  const data = [
    {
      names: ["Prisma 2 Case", "PP-Bizon"],
      imgs: ["img1.png", "img2.png"],
    },
  ];

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Color</th>
          </tr>
        </thead>
        <tbody>
          {data.map(({ names, imgs }) => {
            return names.map((name, index) => (
              <tr key={name}>
                <td key={name}>{name}</td>
                <td key={name}>{imgs[index]}</td>
              </tr>
            ));
          })}
        </tbody>
      </table>
    </>
  );
}

export default Sample;

【讨论】：