如何在反应中创建动态表答案

【问题标题】：how to create dynamic table in react如何在反应中创建动态表
【发布时间】：2017-08-08 20:00:52
【问题描述】：

我已经开始使用 reacr-redux。因为我有一些 json 数据要填充为表结构。为此我有这样的数据

[
    {

        "year": 2016,

        "mix": [{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }],

},
{

    "year": 2017,

    "mix": [{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }],

},
{

    "year": 2018,

    "mix": [{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }],

},
{

    "year": 2015,
    "mix" :[{

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }]
},
{

    "year": 2019,

    "mix": [
        {

            "name": "A",

            "volume": 0.55,

        },
        {

            "name": "B",

            "volume": 0.2,

        },
        {

            "name": "C",

            "volume": 0.0,

        },
        {

            "name": "D",

            "volume": 0.0,

        }
    ],


}
]

我想要这样的表结构。基本上它会提取年份和那一年的所有组合。所以最终的表结构应该是这样的

    2015    2016    2017    2018
A   0.55   0.55    0.55     0.55
B   0.2     0.2     0.2      0.2
C   0        0       0       0
D   0       0        0       0

为此我编写了这样的代码

     <table className="table table-bordered">
                   <thead>
                    <tr>
                        <th></th>
                     {this.props.allYear.map((data) =>(
                       <th>{data.year.toString().substr(0,4)}</th> 
                     ))}
                    </tr>
                    </thead>
                    <tbody>
                    {this.props.allYear.map((data) =>(
                       data.mix.map((Data1) => (

                           <tr>

                               {Data1.name}
                           </tr>

                ))
                ))}
                    <td></td>
                {this.props.allYear.map((data) =>(
                    <td>
                       {data.mix.map((Data1) => {

                           return(
                               <tr>
                               {Data1.volume}

                           </tr>
                           )



                       })}
                </td>
                ))}

                     </tbody>

                </table>

但是由于我写的 tr，我的所有数据都下降了 1 tr，所以表格看起来像这样

    2015    2016    2017    2018
A               
B               
C               
D               
    0.55    0.55    0.55    0.55
    0.2 0.2 0.2 0.2
    0   0   0   0
    0   0   0   0.

请告诉我如何解决这个问题

【问题讨论】：

@downvoter：请让我知道我在哪里弄错了，以便我下次可以解决这个问题
最大的问题是您的数据数组包含列，而不是行。所以为了保持渲染函数的小，我们需要重构整个数据数组，让每个元素都是最终表格的一行。

标签： javascript reactjs ecmascript-6 react-redux

【解决方案1】：

我想出了一种方法来保留您的原始数据结构：

var sorted = this.props.allYear.sort((a, b) => a.year - b.year);
// create rows object, letters as keys, each value an array of volumes
var rows = {};
sorted.forEach(function (year) {
    year.mix.forEach((data) => {
        if (!rows[data.name]) rows[data.name] = [];
        rows[data.name].push(data.volume);
    });
});

return (
    <table className="table table-bordered">
        <thead>
            <tr>
                <th></th>
                {sorted.map((data, i) => <th key={i}>{data.year}</th>)}
            </tr>
        </thead>
        <tbody>
            {Object.keys(rows).map((letter) =>
                <tr>
                    <td>{letter}</td>
                    {rows[letter].map((data) => <td>{data}</td>)}
                </tr>
            )}
        </tbody>
    </table>
);

但是，这是假设数据中没有“漏洞”。

【讨论】：

【解决方案2】：

你的表结构有各种各样的错误。你正在做的是创建 4 个<tr>，然后是一堆随机的<td>。基本表结构是 table -> tbody -> tr -> td。您需要创建两个地图功能。就像评论中提到的 Chris G 一样，您的数据结构没有设置为使这变得容易。它实际上使您想做的事情变得更加困难。我建议将您的数据结构更改为更像这样的东西：

[
    A: [{
        year: 2015,
        volume: 0.0
    },{
        year: 2016,
        volume: 0.0
    },{
        year: 2017,
        volume: 0.0
    }],
    B: [{
        year: 2015,
        volume: 0.0
    },{
        year: 2016,
        volume: 0.0
    },{
        year: 2017,
        volume: 0.0
    }],
   C: ...
]

【讨论】：