ReactJS setState 不更新任何内容

Question

Im quite new to reactJS and ive been trying to create a table sorting based on this https://www.florin-pop.com/blog/2019/07/sort-table-data-with-react/ . All works fine, did some changes and all, except my setState doesnt seem to update the my sorting. Here are some of my codes:

 class TableView extends Component { constructor(props) { super(props) this.state = { students: [ { name: 'Brian', age: 20, email: 'brian@hotmail.com' }, { name: 'Kathy', age: 42, email: 'kathy@gmail.com' }, { name: 'Donney', age: 50, email: 'donneylee@sjks.com' }, { name: 'Cindy', age: 36, email: 'cindy@jflasjfl.com'} ] } this.headers = ['name', 'age', 'email']; this.sortTypes = { up: { fn: (a, b) => { if (a.name < b.name) { return - 1 }} }, down: { fn: (a, b) => { if (a.name > b.name) { return 1 }} }, default: { fn: (a, b) => a } }; this.stateSort = { currentSort: 'default' }; } onSortAsc = () => { const { currentSort } = this.stateSort; this.setState({ currentSort: 'up' }, () => { console.log(currentSort); }); } renderTableData() { const { currentSort } = this.stateSort; const data = this.state.students; return ( ( data.length > 0 && ( [...data].sort(this.sortTypes[currentSort].fn).map(p => ( <tr key={p.name}> <td>{p.name}</td> <td>{p.age}</td> <td>{p.email}</td> </tr> )) ) )) } renderTableHeader() { return<th key={index}>{key}<DropdownButton menuAlign="right" className="table-dropdown" title=""> <Dropdown.Item onClick={this.onSortAsc}>Sort AZ</Dropdown.Item> <Dropdown.Item href="#/action-2">Sort ZA</Dropdown.Item> </DropdownButton></th> } //The table render() { //Whenever our class runs, render method will be called automatically, it may have already defined in the constructor behind the scene. return ( <div> <div id="table-view"> <button>Hide Fields</button> <span class="more-btn"><FaEllipsisH /></span> <div id="table-content"> <table id='funding-stage'> <thead> <tbody> <tr>{this.renderTableHeader()}</tr> {this.renderTableData()} </tbody> </thead> </table> </div> </div> </div> ) } }; export default Tableview;

Im not sure what went wrong. Ive tried different solutions but nothing seems to work.

Answer 1

The currentSort state should be in the state object (eg you should access it as this.state.currentSort ) if you put it in another object ( stateSort ) and that object is the one in the state object, changing it will not cause update or rerender.

1 - remove

this.stateSort = {
         currentSort: 'default'
};

2 - add currentSort to state object

this.state = {
       students: [
          { name: 'Brian', age: 20, email: 'brian@hotmail.com' },
          { name: 'Kathy', age: 42, email: 'kathy@gmail.com' },
          { name: 'Donney', age: 50, email: 'donneylee@sjks.com' },
          { name: 'Cindy', age: 36, email: 'cindy@jflasjfl.com'}
       ],
       currentSort: 'default' 
    }

3 - in onSortAsc function

onSortAsc = () => {
    this.setState({ currentSort: 'up' }, () => {
        console.log(currentSort);
    }); 
}

and If that didn't help, update your code snippet and show the whole component to help you better.