ReactJS使用动态键使用其数据迭代状态数组 [英] ReactJS iterate through state array with dynamic key with its data
本文介绍了ReactJS使用动态键使用其数据迭代状态数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个如下所示的数组:
"data": {
"key1": {
"key_val1": "data1",
"key_val2": "data2",
"key_val3": "data3",
"key_val4": "data4",
},
"key2": {
"key_val1": "data1",
"key_val2": "data2",
"key_val3": "data3",
"key_val4": "data4",
},
"key3": {
"key_val1": "data1",
"key_val2": "data2",
"key_val3": "data3",
"key_val4": "data4",
}
}
我希望使用此数组迭代并填充表,但收到错误this.state.data.map()不是函数。
以下是我的反应组件:
import React, { Component } from "react";
import $ from "jquery";
import axios from "axios";
class DataComponent extends Component {
state = {
data: [],
isLoading: true
};
componentDidMount() {
this.getData();
}
getData() {
var curr_date = new Date().toISOString().substring(0, 10);
const params = new FormData();
params.append("date", curr_date);
axios
.post(`http://api.mydomain.in/getdataList/`, params)
.then(res => {
if (res.data.result === 1) {
this.setState({
data: res.data.data,
isLoading: false
});
}
if (!this.state.isLoading) {
this.initTable();
}
})
.catch(err => {
console.log(err);
});
}
initTable() {
$("#my_table").DataTable({
bLengthChange: false,
lengthMenu: [[15, 15, 15, "All"]],
language: {
search: "_INPUT_",
searchPlaceholder: "Search records"
}
});
}
render() {
return (
<div className="tab-pane active" id="mytab">
<div className="inner-content table-responsive">
<table id="my_table" className="display" style={{ width: "100%" }}>
<thead>
<tr className="heading-table">
<th>Col1</th>
<th>col2 </th>
<th>col3 </th>
<th>col4 </th>
<th>col5 </th>
</tr>
</thead>
{this.state.isLoading ? null : (
<tbody>
{this.state.data.map(d => (
<tr>
<td>{d}</td>
<td>{d.key_val1}</td>
<td>{d.key_val2}</td>
<td>{d.key_val3}</td>
<td>{d.key_val4}</td>
</tr>
))}
</tbody>
)}
</table>
</div>
</div>
);
}
}
export default DataComponent;
this.state.data
将使用如上所示的示例数组进行更新。
我如何才能实现这一点?
我也尝试过Object.keys(this.state.data).map()
,但没有成功。
提前感谢。
json
您的data
变量是推荐答案对象,而不是数组。要将其转换为数组并获取键和值,可以使用Object.entries
。
此函数将返回包含其他数组的数组,第一个值为键,第二个值为值:
{Object.entries(this.state.data).map(([key, value]) => (
<tr key={key}>
<td>{key}</td>
<td>{value.key_val1}</td>
<td>{value.key_val2}</td>
<td>{value.key_val3}</td>
<td>{value.key_val4}</td>
</tr>
))}
如果不需要对象的键,可以使用Object.values
。
使用解构的替代方案:
{Object.entries(this.state.data).map(([key, { key_val1, key_val2, key_val3, key_val4 }]) => (
<tr key={key}>
<td>{key}</td>
<td>{key_val1}</td>
<td>{key_val2}</td>
<td>{key_val3}</td>
<td>{key_val4}</td>
</tr>
))}
另一个使用嵌套映射的版本,可以处理任何类型的对象:
{Object.entries(this.state.data).map(([key, value]) => (
<tr key={key}>
<td>{key}</td>
{Object.entries(value).map(([name, data]) => <td key={name} >{data}</td>)}
</tr>
))}
这篇关于ReactJS使用动态键使用其数据迭代状态数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文