javascript - componentWillMount 中的 setState 不会反射(reflect)在 componentWillMount 中

Question

我正在react组件的componentWillMount函数中发出ajax请求。我有一个状态变量。我将此变量的状态设置为 ajax 调用的响应。

this.setState({state_variable: response})

现在，在我的 componentDidMount 函数中，我尝试 console.log state_variable 的值。理想情况下，我应该得到 state_variable 的值，就像我上面设置的响应一样。但在控制台中，我看到打印为空数组的值，这是 state_variable 的初始化值。

为什么componentDidMount现在能够获取我设置的值？我做错了什么

Answer 1

你的ajax调用通常位于componentDidMount中，而不是componentWillMount中。原因是您不希望在未安装的组件中进行调用，并且您假设在组件安装之前不会返回数据。

我确信一切都运行良好，您可能只是在 componentWillMount ajax 调用返回之前进行日志记录。不要这样做，而是做类似的事情:

$.ajax({
  // call parameters go here
}).then(function(response) {
  this.setState({ state_variable: response });
})

now do your logging inside of render instead:

render() {
  console.log(this.state.state_variable)
  // normal render jsx here
}

render 将在 setState 调用完成后重新执行，因此您应该获得良好的日志。