我正在ReactJS中构建一个简单的应用程序,它通过调用某个API来使用JSON数组.然后我在表中填充数组的结果.我现在想让表的列可以排序.我理想的是要进行升序和降序排序.一旦我按升序排序时点击标题,它应该按降序排序,反之亦然.这是我的代码.
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
componentDidMount() {
fetch("http://hostname:xxxx/yyyy/zzzz")
.then(function(response) {
return response.json();
})
.then(items => this.setState({ data: items }));
}
render() {
var newdata = this.state.data;
return (
<table className="m-table">
<thead>
<tr>
<th>AccountName</th>
<th>ContractValue</th>
</tr>
</thead>
<tbody>
{newdata.map(function(account, index) {
return (
<tr key={index} data-item={account}>
<td data-title="Account">{account.accountname}</td>
<td data-title="Value">{account.negotiatedcontractvalue}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
export default ParentComponent;
Run Code Online (Sandbox Code Playgroud)