javascript - react 数组状态在渲染之前被清除

Question

有响应问题。

当进行 ajax 调用以从后端检索数据时，我检索了数据，但它似乎检索数据 仅 如果它包装在 .then()。在 .then() 之外，数据会被清除。

consume 是处理 axios 调用的个人模块。

问题来了

componentWillMount() {
    const retrieveLogs = {
      method: "GET",
      url: this.state.url, 
    }
    consume.fetch(retrieveLogs)
      .then(res => {
        if(typeof res.logger === "object"){
          this.setState({
            logs: res.logger,

         })
         console.log(this.state.logs) // show the console log here but
        }
    })
    console.log(this.state.logs) // but shows empty array here why is this ?
  }

Answer 1

componentWillMount 是不安全的并且已弃用，您不应该使用它，查看详情 here .最好的方法是使用 componentDidMount 获取数据，然后更新状态。具有空状态的初始渲染是模式，你不应该担心它。另外，您不应该那样记录您的状态，请记住，setState 是异步的，并且您无法保证在调用 console.log 时会更新状态，在这种情况下使用setState 的第二个参数，它为您提供一个仅在所有更新完成后才会触发的回调。

componentDidMount() {
const retrieveLogs = {
  method: "GET",
  url: this.state.url, 
}
consume.fetch(retrieveLogs)
  .then(res => {
    if(typeof res.logger === "object"){
      this.setState({
        logs: res.logger,

     }, console.log(this.state.logs))

    }
})}

如果您需要在数据到达后执行某些操作，请使用 componentDidUpdate 在 props 或 state 发生变化时实现您的自定义逻辑。

componentDidUpdate(prevProps, prevState){
   if(prevProps.item !== this.props.item)
       this.setState({item}, console.log(this.state.item))
}