Функция не видет обновление стейта Reacta?

Question

[Николай Семенов]

Ребятушки всем привет.
Такая чтука есть функция которая меняет стейт сласса а за ней вызывается следущая, так вот эта следущая берез значение старого стейта. как это поравить?
првая функция

onSortChange = (column) => {
    const type = column.desc ? 'asc' : 'desc';
    this.setState({columnId: column.id})
    this.props.sortColumn(column.id, type);
    this.props.onSubmit(0, this.state.pageSize, false, column.id, type)
    console.log(this.state.columnId)
  };

вторая

fetchData = (state) => {
    const { data, onSubmit } = this.props;
    const { pageSize, pages, columnId } = state;
    this.setState({totalPages: pages});

    if (data.tableData.length < data.total) {
      onSubmit(data.tableData.length, pageSize, true)
    }
  };

не видит новую columnId
Помгите пожалуйста

Comments

[Роман Александрович]

покажите как вызывается 1 и 2 функция
а лучше весь компонент

[Николай Семенов]

Роман Александрович, вызывается из реакт тайбл

<ReactTable
        data={data.tableData}
        columns={this.columnGenerator(items)}
        className='data-tables -highlight no-border mtop-20 left full'
        showPaginationTop
        showPaginationBottom={false}
        defaultPageSize={this.state.pageSize}
        pageSizeOptions={[25, 50, 100, 200, 400, 500]}
        onFetchData={this.fetchData}
        pages={data.pages}
        loading={isPending}
        onSortedChange={(newSorted, column) => {
          this.onSortChange(newSorted[0])
        }}
        onPageSizeChange={this.onPageSizeChange}
      />

Answer 1

[0xD34F]

Метод setState - асинхронный. Хотите какие-то действия выполнять после изменения стейта - выполняйте их в колбеке:

this.setState(newState, () => {
  // вот здесь
})

Comments

[Антон Спирин]

Нет никакого смысла оборачивать fetchData в анонимную функцию.
Достаточно:
this.setState(newState, this.fetchData);

[0xD34F]

Антон Спирин, спасибо за замечание, но я как бы в курсе. Однако автор вопроса не показал (по крайней мере на тот момент, когда ответ был написан), где и как он fetchData вызывает - мало ли, может он ещё чего попутно там делать собирается.

Answer 2

[Антон Спирин]

setState - ассинхронная функция. Можно использовать колбек:

this.setState({
  columnId,
}, this.fetchData);

но это не лучшее решение с точки зрения архитектуры, если вам надо вызывать fetchData по изменению разных частей state (пагинация, сортировка, количество элементов на странице и пр.).
В этом случае fetchData лучше вызывать в componentDidUpdate:

componentDidUpdate(_, prevState) {
  if (prevState.columnId !== this.state.columnId) {
    this.fetchData();
  }
}

Так все условия вызова fetchData по изменению состояния будут находиться в одном месте. Вместо кучи колбеков по функциям компонента. Но если собираетесь дергать только по onSortChange, то можно вызывать fetchData в колбеке setState.

Answer 3

[Andrew Ghostuhin]

А откуда onSortChange и fetchData вызывается?
Ну и setState и props.sortColumn асинхронны...

Comments

[Николай Семенов]

с реакт тайбл при изменении сортировки

[Andrew Ghostuhin]

Николай Семенов, код-то покажи уже)

[Andrew Ghostuhin]

Николай Семенов, короче, фишка в том что в этих методах стейт может еще не стоять, или пропсы, там можно делать что-то типа this.fetchData(this.state)
или даже this.fetchData(this.state.columnId,...)
и у тебя тогда гарантированно будут нужные значения