Избегайте использования обратного вызова в setState при ссылке на предыдущее состояние

Question

Я все еще получаю эту ошибку , но я не понимаю, как это возможно в моем коде:

export default class GenericTable extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      otherStuff: '',
      ...props, // rows are received on props
      sort: {
        col: 0,
        asc: true,
      },
    };
  }

  onSortChange = i => {
    const tempRows = this.state.rows;
    const tempSort = this.state.sort; // this is the line where it says about that error

    const newRows = [];
    if (tempSort.asc) {
      newRows = tempRows.sort(function(a, b) {
        if (a.cells[i] < b.cells[i]) {
          return -1;
        }
        if (a.cells[i] > b.cells[i]) {
          return 1;
        }
        return 0;
      });
    } else {
      newRows = tempRows.sort(function(a, b) {
        if (a.cells[i] > b.cells[i]) {
          return -1;
        }
        if (a.cells[i] < b.cells[i]) {
          return 1;
        }
        return 0;
      });
    }
    tempSort.col = [i];
    tempSort.asc = !tempSort.asc;
    this.setState({ rows: newRows, sort: tempSort });
  };
...
}

Итак, именно здесь объявлено tempSort. Как его изменить, чтобы он заработал?

Не вижу сходства с описанным на странице eslint.

Answer 1

@ Лео Месси , разве ты не должен готовиться к игре «Наполи» в субботу? :)

Шутки в сторону ...

Вам нужно будет использовать эту форму setState , которая принимает функцию, вызываемую с предыдущим состоянием, поэтому logi c внутри функция работает в том же состоянии. В конце концов, он должен вернуть вновь вычисленное состояние. Отметьте this pastebin .

Протестировано в моем коде VS с указанным правилом, добавленным в мой .eslintrc.js. Но, тем не менее, имейте в виду, что размещение логики вычисления состояния c в версии с параметром prevState не мешает вам создавать другие проблемы (как я уже упоминал в своей предыдущей версии ответа, не создавая новые объекты, но изменяя существующие там, где ожидалось первое. Я удалил эту часть ответа, поскольку она фактически не решает эту конкретную проблему, но я предлагаю вам еще раз проверить ее в истории изменений).