如何在 React js 中为 table 布局中的特定单元格赋值？

Question

我正在尝试在 React js 中创建一个 table 视图，其中包含我将从 JSON 获取的从 1 月到 12 月的数据，我尝试获取并将它们分配给 table。这些值已分配但会重复，我找不到修复它们的逻辑。我需要这样的输出

我正在处理的代码是

<table>
    <thead>
        <tr>
            <th>Commodity Name</th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        {quantity &&
            Object.keys(quantity).map(key =>
                quantity[key].map(data => (
                    <tr>
                        <td>{data.comm_name}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                        <td>{data.quantity}</td>
                    </tr>
                ))
            )}
    </tbody>
</table>

这是 JSON 我从后端获取的

{
    "January": [
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Batteries",
            "quantity": "435",
            "reportdate": "2022-01"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "E-Waste",
            "quantity": "54",
            "reportdate": "2022-01"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Metal",
            "quantity": "67.78",
            "reportdate": "2022-01"
        }
    ],
    "February": [
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Batteries",
            "quantity": "54",
            "reportdate": "2022-02"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "E-Waste",
            "quantity": "67",
            "reportdate": "2022-02"
        },
        {
            "name": "selva",
            "loc_name": "Trichy",
            "comm_name": "Metal",
            "quantity": "78",
            "reportdate": "2022-02"
        }
    ]
}

这是我得到的输出

我尝试使用 if 语句但出现错误，我修复了它，但任何列下都没有显示数据

Answer 1

首先，您需要将数据转换成row-wise格式，然后才能轻松显示。

像下面这样尝试。

export default function App() {
  
  const monthsArray = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; 
  
  const quantity = { January: [ { name: "selva", loc_name: "Trichy", comm_name: "Batteries", quantity: "435", reportdate: "2022-01" }, { name: "selva", loc_name: "Trichy", comm_name: "E-Waste", quantity: "54", reportdate: "2022-01" }, { name: "selva", loc_name: "Trichy", comm_name: "Metal", quantity: "67.78", reportdate: "2022-01" } ], February: [ { name: "selva", loc_name: "Trichy", comm_name: "Batteries", quantity: "54", reportdate: "2022-02" }, { name: "selva", loc_name: "Trichy", comm_name: "E-Waste", quantity: "67", reportdate: "2022-02" }, { name: "selva", loc_name: "Trichy", comm_name: "Metal", quantity: "78", reportdate: "2022-02" } ] };

  const convertedData = Object.entries(quantity).reduce(
    // get month and its arr in the initial data object 
    (prev, [month, dataArr]) => {
      // get the month index 
      const dataIndex = monthsArray.indexOf(month.substring(0, 3));
      dataArr.forEach(({ comm_name, quantity }) => {
        if (!prev[comm_name]) {
          // comm_name does not has intialized yet. create an empty array with 12 empty strings (for 12 months)
          prev[comm_name] = new Array(12).fill("");;
        }
        // assign quantity to the array where index is the month
        prev[comm_name][dataIndex] = quantity;
      });
      return prev;
    },
    {}
  );

  return (
    <table>
      <thead>
        <tr>
          <th>Commodity Name</th>
          {monthsArray.map((month) => (
            <th>{month}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {Object.entries(convertedData).map(([comm_name, dataArr]) => (
          <tr>
            <td>{comm_name}</td>
            {dataArr.map((qty) => (
              <td>{qty}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Code Sandbox

如何在 React js 中为 table 布局中的特定单元格赋值？

How to assign a value to particular cell in table layout in react js?

json

reactjs

react-map-gl

react-hooks