我已经开始使用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.
请告诉我如何解决此问题
答案 0 :(得分：0)
你的表结构是各种错误的。你正在做的是创建4 <tr>，然后创建一堆随机<td>。基本表结构是表 - ＆gt; tbody - ＆gt; tr - ＆gt; 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: ...
]
答案 1 :(得分：0)
我想出了一种保留原始数据结构的方法：
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>
);
然而，这假设数据中没有“漏洞”。