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是UNSAFE且已弃用，您不应使用它，请参见详细信息here。最好的方法是使用componentDidMount来获取数据，然后更新状态。带有空状态的初始渲染是pattern，您不必担心。另外，您不应该这样记录状态，请记住，setState是异步的，并且不能保证在调用console.log时会更新状态，在这种情况下，请使用{{1}的第二个参数}，为您提供一个仅在所有更新完成后才会触发的回调。

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

Answer 2

找到了解决方案。

我可以使用componentDidUpdate，这样，当在componentDidupdate中完全完成渲染后，我就可以渲染响应数据了。

因此，如果show === false，则表示状态。然后我显示数据，如果不呈现null。

这是我想出的。

 componentDidUpdate(prevProps){
    if(this.state.logs.length !== 0 && prevProps.logs === null){
      this.setState({
        show:false 
      })
    }
    console.log(this.state.logs); // shows here
  }


return(
  {!this.state.show ? (  
     <Logs logs= {this.state.logs} />  // renders the data.
  ):(
     null
   )}
)

反应数组状态在呈现之前被清除

2 个答案: