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}的反应属性来传递

或者，如果您根本不关心电影的按键，可以按照@Madmadi的建议进行操作：

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

使用map（）和JSX将数据数组渲染为[[]]

1 个答案: