通过对象数组进行映射在 Table 组件中不起作用答案

【问题标题】：Mapping through array of objects doesn't work in Table component通过对象数组进行映射在 Table 组件中不起作用
【发布时间】：2022-07-23 00:36:28
【问题描述】：

在一个 React 项目中，我有一个表格组件，它获取数组结构化 JSON 数据的数组并且工作正常，但是，它如何处理对象数组结构化 JSON 数据。以下是参考代码

下面是数组JSON数据的数组

const store_grid_data = {
    data: [
      [
        { id: 1 },
        false,
        "McDonalds",
        "Burger Store",
        "Mike John",
        "YYYY/MM",
        "Best Food Chain"
      ],
      [
        { id: 2 },
        false,
        "KFC",
        "Chicken Food Store",
        "Rock Wills",
        "YYYY/MM",
        "Best Food Chain Globally"
      ]
    ],
    page_info: {
      total_pages: 5,
      current_page: 1
    }
  };

在这里我初始化并设置它

  let GridConfig = {};
  let grid_data = {};

  GridConfig = TableConfig;
  grid_data = store_grid_data;

  const [gridConfigData, setGridConfigData] = useState(GridConfig);
  const [gridData, setGridData] = useState(grid_data);

return (
    <>
      <Grid GridConfig={gridConfigData} GridData={gridData} />
    </>
  );

下面是表格的列部分

const TableConfig = {
  column_config: [
    {
      title: "",
      col_span: 1,
      sorted_order: "None",
      data_type: "check_box",
      cell_click_callback: true
    },
    {
      title: "Company",
      col_span: 1,
      sorted_order: "None",
      data_type: "text",
      cell_click_callback: false
    },
    {
      title: "Desc",
      col_span: 1,
      sorted_order: "None",
      data_type: "text",
      cell_click_callback: false
    }
  ]
};

export default TableConfig;

现在是整个表结构

let colConfig = props.GridConfig.column_config;
  let gridData = props.GridData.data;

  return (
    <div className="table-responsive pt-3">
      <table className="table table-bordered table-striped" width="100%">
        <thead>
          <tr>
            {colConfig.map((d, key) => {
              return (
                <th key={key} colSpan={d.col_span} className={d.title_class}>
                  {d.title}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {gridData.map((rowData, rIndex) => {
            return (
              <tr
                key={`tr_${rowData[0].id}`}
                className={rowData[0].row_properties}
              >
                {rowData.slice(1).map((colData, cIndex) => {
                  return (
                    <td
                      key={`td_${rIndex}_${cIndex}`}
                      className={colConfig[cIndex].data_col_class}
                    >
                      {colConfig[cIndex].data_type === "text" &&
                        colConfig[cIndex].cell_click_callback && (
                          <div>
                            <a
                              onClick={() =>
                                clickCallback(
                                  colConfig[cIndex].title,
                                  cIndex + 1,
                                  rowData[0].id
                                )
                              }
                            >
                              {" "}
                              {colData}{" "}
                            </a>
                          </div>
                        )}
                      {colConfig[cIndex].data_type === "text" &&
                        !colConfig[cIndex].cell_click_callback && (
                          <div>{colData}</div>
                        )}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

我想将对象数组的数据设置为

const newStoreData = {
    data: [
      {
        id: 252,
        compName: "Burger King",
        desc: "Burger Store",
        franchise: "Harry Tyson",
        estDate: "2020/11",
        feedBack: "Best Burgers"
      },
      {
        id: 321,
        compName: "Starbucks",
        desc: "Coffee Store",
        franchise: "George Speilsberg",
        estDate: "2018/04",
        feedBack: "Best Coffee"
      }
    ],
    page_info: {
      total_pages: 10,
      current_page: 1
    }
  };

解决这个问题的最佳解决方案是什么。任何建议都非常感谢

请参考 Codesandbox 链接：https://codesandbox.io/s/bold-boyd-2e16j6

【问题讨论】：

标签： javascript reactjs arrays object

【解决方案1】：

我认为只需更改指向属性的方式并更改表的第二个映射以便可以在 JSON 中使用它就可以了。

类似这样的：

        <tbody>
          {gridData.map((rowData, rIndex) => {
            return (
              <tr key={`tr_${rowData.id}`}>
                {Object.keys(rowData).map((key, cIndex) => {
                  return (
                    <td
                      key={`td_${rIndex}_${cIndex}`}
                      className={colConfig[cIndex].data_col_class}
                    >
                      {colConfig[cIndex].data_type === "text" &&
                        colConfig[cIndex].cell_click_callback && (
                          <div> {rowData[key]} </div>
                        )}
                      {colConfig[cIndex].data_type === "text" &&
                        !colConfig[cIndex].cell_click_callback && (
                          <div>{rowData[key]}</div>
                        )}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>

【讨论】：