如何在反應中創建動態表

我已經開始使用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>

但我所有的數據去1 TR下來，因爲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.

請讓我知道如何解決這個

來源

2017-08-08 LowCool

@downvoter：請讓我知道我在哪裏弄錯了，所以我可以照顧下一次 – LowCool

最大的問題是您的數據數組包含列，而不是行。所以爲了保持渲染函數的小，我們需要重構整個數據數組，以便每個元素都是最終表的一行。 –

我想出了一個辦法，讓您的原始數據結構：

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> 
);

但是這個假設沒有「洞」數據。

來源

2017-08-08 21:03:59

就像一個奇蹟..感謝 – LowCool

你的表結構是所有種類錯誤。你在做什麼是創建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: ... 
]

來源

2017-08-08 20:47:05

如何在反應中創建動態表

回答

相關問題