redux 如何在react中动态Map表头键都相同的表头和行

rryofs0p 于 2022-12-29 发布在 React

关注(0)|答案(1)|浏览(123)

我有这样的回应json：

[
    {
        "DESCRIPTION": "OER",
        "OER_HI": 23.23650286618332,
        "OER_BI": 23.419567144988942,
        "OER_SBI": 23.74404977161088
    },
    {
        "DESCRIPTION": "CPO Production",
        "OER_HI": 1046.17,
        "OER_BI": 10538.517,
        "OER_SBI": 87788.887
    },
    {
        "DESCRIPTION": "CPO Dispatch",
        "OER_HI": 1489.6000000000001,
        "OER_BI": 9145.67,
        "OER_SBI": 81187.22
    },
    {
        "DESCRIPTION": "CPO Stock",
        "OER_HI": 12032.43,
        "OER_BI": null,
        "OER_SBI": null
    },
    {
        "DESCRIPTION": "Total Oil, Losses/FFB",
        "OER_HI": 1.4761952,
        "OER_BI": 1.4469707631313098,
        "OER_SBI": 1.44239404903668
    }
]

我想Map它，这样它就会用json键填充表头，用json值填充行，如下所示：

这个屏幕截图是它应该看起来的样子，所以我用下面的代码Map它：

import React, {useEffect} from "react";
import {connect, useDispatch} from "react-redux";
import {Table, Header} from "semantic-ui-react";
import {fetchChart8} from "../redux/actions";
import LoadingStatus from "./templates/LoadingStatus";
import _ from "lodash"

const TableChart = ({chart_8}) => {
    const dispatch = useDispatch();

    let testMap = chart_8?.map(data => {
        return Object.keys(data)
    })

    let description = testMap[0]
    let oer_hi = testMap[0]
    let oer_bi = testMap[0]
    let oer_sbi = testMap[0]

    useEffect(() => {

        dispatch(fetchChart8())

    }, [dispatch]);

    if (_.isNull(chart_8)) return <LoadingStatus/>;

    return (
        <div>
            <Header>
                <Header.Content>CPO</Header.Content>
            </Header>
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>
                            {description}
                        </Table.HeaderCell>
                        <Table.HeaderCell>
                            {oer_hi}
                        </Table.HeaderCell>
                        <Table.HeaderCell>
                            {oer_bi}
                        </Table.HeaderCell>
                        <Table.HeaderCell>
                            {oer_sbi}
                        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {chart_8.map((data) => {
                        return (
                            <Table.Row>
                                <Table.Cell>
                                    {data["DESCRIPTION"]}
                                </Table.Cell>
                                <Table.Cell>
                                    {data["OER_HI"]}
                                </Table.Cell>
                                <Table.Cell>
                                    {data["OER_BI"]}
                                </Table.Cell>
                                <Table.Cell>
                                    {data["OER_SBI"]}
                                </Table.Cell>
                            </Table.Row>
                        )
                    })}
                </Table.Body>
            </Table>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        chart_8: state.dashboard.chart_8
    };
};

export default connect(mapStateToProps, { fetchChart8 })(TableChart);

相反，我得到了一个类似这样的表，表头填充了json键的重复值。

redux

来源：https://stackoverflow.com/questions/74946987/how-to-dynamically-map-table-header-and-rows-in-react-when-header-keys-are-all-t

1条答案

按热度按时间

jqjz2hbq1#

比较好的方法是不要使用Object.keys()，因为它不能保证key数组的顺序是稳定的，表头列是可枚举的，我们应该按照确定的顺序声明表头数组，然后通过表头列找到每行表单元的值，这样就可以保证每个表头和表单元的数据是对应的。
TableChart.tsx：

import * as React from 'react';
import { Table, Header } from 'semantic-ui-react';

export const TableChart = ({ chart_8 }) => {
  // const tableHeaders = Object.keys(chart_8?.[0] || {});
  // Or, better
  const tableHeaders = [
    { dataIndex: 'DESCRIPTION' },
    { dataIndex: 'OER_HI' },
    { dataIndex: 'OER_BI' },
    { dataIndex: 'OER_SBI' },
  ];

  return (
    <div>
      <Header>
        <Header.Content>CPO</Header.Content>
      </Header>
      <Table celled>
        <Table.Header>
          <Table.Row>
            {tableHeaders.map((header) => (
              <Table.HeaderCell>{header.dataIndex}</Table.HeaderCell>
            ))}
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {chart_8.map((data) => {
            const values = tableHeaders.map((th) => data[th.dataIndex]);
            return (
              <Table.Row>
                {values.map((v) => (
                  <Table.Cell>{v}</Table.Cell>
                ))}
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    </div>
  );
};

App.tsx：

import * as React from 'react';
import './style.css';
import 'semantic-ui-css/semantic.min.css';
import { TableChart } from './TableChart';

export default function App() {
  return (
    <div>
      <TableChart
        chart_8={[
          {
            DESCRIPTION: 'OER',
            OER_HI: 23.23650286618332,
            OER_BI: 23.419567144988942,
            OER_SBI: 23.74404977161088,
          },
          {
            DESCRIPTION: 'CPO Production',
            OER_HI: 1046.17,
            OER_BI: 10538.517,
            OER_SBI: 87788.887,
          },
          {
            DESCRIPTION: 'CPO Dispatch',
            OER_HI: 1489.6000000000001,
            OER_BI: 9145.67,
            OER_SBI: 81187.22,
          },
          {
            DESCRIPTION: 'CPO Stock',
            OER_HI: 12032.43,
            OER_BI: null,
            OER_SBI: null,
          },
          {
            DESCRIPTION: 'Total Oil, Losses/FFB',
            OER_HI: 1.4761952,
            OER_BI: 1.4469707631313098,
            OER_SBI: 1.44239404903668,
          },
        ]}
      />
    </div>
  );
}

输出：

stackblitz

赞(0）回复(0）举报 2022-12-29

我来回答

redux 如何在react中动态Map表头键都相同的表头和行

1条答案

相关问题

热门标签

最新问答