[英]ReactJS Render not firing after data sort
Using ReactJS and attempting to sort data on the click of a table header I am running into a problem where the data DOES get sorted but not getting re-rendered:使用 ReactJS 并尝试在单击表标题时对数据进行排序我遇到了一个问题,即数据确实已排序但未重新呈现:
import React, { Component } from 'react';
import "../styles/datagrid.min.css";
import "../styles/customers.min.css";
import {loadLocal} from "../globals"
class Customers extends Component {
constructor(props){
super(props)
this.sortData = this.sortData.bind(this);
this.formatRows = this.formatRows.bind(this);
this.state = {data: []}
}
formatRows(){
return(this.state.data.map(function(item,ndx){
return(
<tr key={ndx}>
<td><input type="checkbox"/></td>
<td>{item.company}<p>{item.address}</p></td>
<td>{item.email}</td>
<td>{item.telephone}</td>
<td>{item.balance}</td>
<td><button dataid={item.id}>Edit</button></td>
</tr>
)
}));
}
sortData(e){
switch (e.target.getAttribute("col")) {
case "1":
this.setState(prevState =>{
this.state.data.sort((a,b)=>(a.company.localeCompare(b.company)))
});
break;
default:
break;
}
}
componentDidMount(){
let me = this;
loadLocal("customers.json",function(data){me.setState({data:data});
}
render() {
return(
<div id="customers-layout">
<header><h2>Customer Information</h2></header>
<section style={{height:this.state.sectionHeight}}>
<table className="datagrid">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th col="1" onClick={this.sortData}>Customer Name</th>
<th col="2" onClick={this.sortData}>Email Address</th>
<th col="3" onClick={this.sortData}>Telephone Number</th>
<th col="4" onClick={this.sortData}>Balance</th>
<th col="5">Action</th>
</tr>
</thead>
<tbody style={{height:this.state.tableHeight}}>{this.formatRows()}</tbody>
</table>
</section>
<footer>Gonna Put The Calcs Here!</footer>
</div>
)
}
};
export default Customers
I get that the code is a mixup of script methodologies as I am still learning ES6;我知道代码是脚本方法的混合,因为我仍在学习 ES6; however, I would think that the above code should work.但是,我认为上面的代码应该可以工作。
Please let me know where I am going astray.请让我知道我哪里会误入歧途。 Thanks.谢谢。
React setState
is an asynchronous function which expect a value not a function. React setState
是一个异步函数,它期望一个值而不是一个函数。 You can do it like this:你可以这样做:
let newData = this.state.data.sort((a,b) => a.company.localeCompare(b.company));
this.setState({ data: newData });
Hope this works for you.希望这对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.