Блог

Главная - Вопросы по программированию - ReactJS setState ничего не обновляет

ReactJS setState ничего не обновляет

#javascript #reactjs #sorting #html-table

#javascript #reactjs #сортировка #html-таблица

Вопрос:

Я новичок в ReactJS, и я пытался создать сортировку таблиц на основе этого https://www.florin-pop.com/blog/2019/07/sort-table-data-with-react /. Все работает нормально, внесены некоторые изменения и все, кроме my setState, похоже, не обновляет мою сортировку. Вот некоторые из моих кодов:

 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 amp;amp; (
            [...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;

Я не уверен, что пошло не так. Я пробовал разные решения, но, похоже, ничего не работает.

Ответ №1:

Состояние currentSort должно находиться в объекте state (например, вы должны получить к нему доступ как this.state.currentSort ) если вы поместите его в другой объект ( stateSort ), и этот объект находится в объекте state, его изменение не приведет к обновлению или повторному отправке.

1 — удалить

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

2 — добавить currentSort к объекту состояния

 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 — в функции onSortAsc

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

и если это не помогло, обновите фрагмент кода и покажите весь компонент, чтобы помочь вам лучше.

Комментарии:

1. Привет! спасибо за ваш вклад. Однако я не уверен, правильно ли я понимаю ваше предложение. но чтобы было понятно, я устанавливаю state и stateSort как разные объекты, где state — это данные, а stateSort — объект для сортировки. Я обновил свой полный код для вашего понимания

2. Спасибо! вы только что сэкономили мне много времени! теперь я понимаю, что вы имеете в виду, помещая его в тот же объект состояния. я думал, что перевод объекта данных в другое состояние не будет иметь значения facepalm