javascript - ReactJS setState 没有更新任何东西

Question

我对 reactJS 很陌生，我一直在尝试基于此https://www.florin-pop.com/blog/2019/07/sort-table-data-with-react/创建表格排序。一切正常，做了一些改变，除了我的 setState 似乎没有更新我的排序。以下是我的一些代码：

class TableView extends Component {
    constructor(props) {
        super(props) 
        this.state = {
           students: [
              { name: 'Brian', age: 20, email: '[e-mail]' },
              { name: 'Kathy', age: 42, email: '[e-mail]' },
              { name: 'Donney', age: 50, email: '[e-mail]' },
              { name: 'Cindy', age: 36, email: '[e-mail]'}
           ]
        }

        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 A-Z</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Sort Z-A</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;

我不确定出了什么问题。我尝试了不同的解决方案，但似乎没有任何效果。

标签： javascriptreactjssortinghtml-table

Answer 1

currentSort 状态应该在状态对象中（例如，您应该以 this.state.currentSort 访问它）如果您将它放在另一个对象（ stateSort ）中并且该对象是状态对象中的对象，更改它不会导致更新或重新渲染。

1 - 删除

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

2 - 将 currentSort 添加到状态对象

this.state = {
       students: [
          { name: 'Brian', age: 20, email: '[e-mail]' },
          { name: 'Kathy', age: 42, email: '[e-mail]' },
          { name: 'Donney', age: 50, email: '[e-mail]' },
          { name: 'Cindy', age: 36, email: '[e-mail]'}
       ],
       currentSort: 'default' 
    }

3 - 在 onSortAsc 函数中

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

如果这没有帮助，请更新您的代码片段并显示整个组件以更好地帮助您。