Как я могу гарантировать, что состояние реакции будет обновлено, а затем вызвать функцию?

Я пытаюсь использовать responsejs для обновления состояния, и после его обновления запускается ajax-вызов с запросом новой страницы. Как раз перед вызовом ajax возникает переменная смещения: var offset = this.state.npp * this.state.page; Однако я обнаруживаю, что после нажатия кнопки clickNextPage() значение this.state.page не обновляется.

Я принципиально не понимаю, что здесь происходит, это, по-видимому, состояние гонки, потому что я смотрю изменение состояния на моей функции render() с помощью {this.state.page}.

Как я могу убедиться, что моя this.state.page обновлена, а затем огонь findByName()?

  clickNextPage: function(event){
    console.log("clicked happend")
    page = this.state.page;
    console.log(page)
    page += 1
    console.log(page)
    this.setState({page: page});
    console.log(this.state.page)
    this.findByName()
  },

Консоль JS:

clicked happend
0
1
0

Ответы

Ответ 1

setState является асинхронным, поскольку this.state не будет обновляться сразу. Короткий ответ на ваше затруднение - это использовать обратный вызов (второй параметр setState), который вызывается после обновления внутреннего состояния. Например

this.setState({page: page}, function stateUpdateComplete() {
    console.log(this.state.page)
    this.findByName();
}.bind(this));

Более длинный ответ заключается в том, что после вызова setState вызывается три функции (подробнее см. здесь https://facebook.github.io/react/docs/component-specs.html)

  • shouldComponentUpdate Это позволяет вам проверять предыдущее и новое состояние, чтобы определить, должен ли компонент обновлять себя. Если вы вернете false, следующие функции выполняются не (хотя this.state будет по-прежнему обновляться внутри вашего компонента)
  • componentWillUpdate это дает вам возможность запускать любой код до того, как новое состояние будет установлено внутри, и произойдет рендеринг.
  • render это происходит между функциями "will" и "did".
  • componentDidUpdate это дает вам возможность запускать любой код после того, как будет установлено новое состояние, и компонент повторно отобразил себя

Ответ 2

При вызове this.setState новое состояние не устанавливается напрямую, React помещает его в состояние ожидания, которое, вызывая this.state, может вернуть старое состояние.

Это связано с тем, что React может обновлять ваши состояния и поэтому не гарантирует, что this.setState является синхронным.

То, что вы хотите сделать, называется this.findByName() внутри componentDidUpdate, componentWillUpdate или через обратный вызов, предлагаемый в качестве второго аргумента this.setState в зависимости от вашего варианта использования. Обратите внимание, что обратный вызов this.setState не будет запущен до тех пор, пока ваш вызов не пройдет, и компонент повторно отобразил себя.

Кроме того, в вашем случае вы можете передать функцию do this.setState вместо того, чтобы делать переменный танец для повышения удобочитаемости.

this.setState(function (prevState, currentProps) {
    return {page: prevState.page + 1}
}, this.findByName);

Ответ 3

Используя безымянные функции, этот код можно записать в более коротком формате.

myReactClassFunction = (param) => {
  this.setState({
    key: value,
  },
  () => this.myClassFunction());
}