使用 map() 和 JSX 將數據數組渲染到 [[]]

Question

我在JSX中有一個函數可以存儲從database值，因此：

const data = JSON.parse(xhr.responseText);
               this.setState({ data: data });

響應格式為：

[{"id":4,"name":"Avengers: Infinity War","year":2018},{"id":5,"name":"Thor: Ragnarock","year":2017},{"id":6,"name":"Black Panther","year":2018},{"id":7,"name":"Star Wars: The Rise of Skywalker","year":2019}]

但是，我正在嘗試使用期望數據采用以下格式的react table control ：

const data = [
     ['1st column', '2nd column', '3rd column'],
     ['1st cell', '2nd cell', '3rd cell']
 ]

 render() {
 <ReactTabllist 
             data={data} 
             property={property} />
 }     

所以我需要將JSON轉換為一個javascript array數組。 有什么好的方法可以做到這一點？

const data = this.state.data.map(movie => ( /* what goes here? */ ));

Answer 1

據我了解，您需要獲取 JSON 中的每個屬性，然后將每個元素的值放入data -react 屬性中。

因此，首先您需要確保來自數據庫的響應格式正確，並且 json 解析的responseText中的每個元素都與其余元素相同。

考慮到這一點：

const formattedData = this
    .state
    .data
    .map(movie => Object.keys(movie).map(key => movie[key]));

而那個formattedData就是你想要作為data={formattedData} react-attribute 傳遞的

或者，如果您根本不關心電影的鍵，您可以按照@Madmadi 的建議進行操作：

const formattedData = this
    .state
    .data
    .map(movie => Object.values(movie));