使用Axios获取WebAPI数据后无法设置State，State为空求助

你遇到的问题本质是React的setState是异步操作——调用setState后不会立刻修改state，而是把更新任务加入队列，等批量处理完成后才会更新state。所以你在setState之后马上打印this.state.fileInfos，拿到的还是更新前的空值，哪怕response.data确实有数据。

两种可行的解决办法 #

• 用setState的回调函数获取更新后的状态
  setState支持传入第二个参数（回调函数），这个函数会在状态更新完成、组件重新渲染后执行，此时能拿到最新的state：

  componentDidMount() {
      uploadFilesService.getFiles().then((response) => {
          this.setState({
              fileInfos: response.data,
          }, () => {
              // 这里能拿到更新后的fileInfos
              console.log('check 2', this.state.fileInfos)
          });
          console.log('check 1', response.data)
      });
  }
  

• 在componentDidUpdate中监听状态变化
  如果需要在状态更新后执行更复杂的逻辑，可以在componentDidUpdate生命周期里处理，记得要对比前后状态避免无限循环：

  componentDidMount() {
      uploadFilesService.getFiles().then((response) => {
          this.setState({
              fileInfos: response.data,
          });
          console.log('check 1', response.data)
      });
  }
  
  componentDidUpdate(prevProps, prevState) {
      // 确认fileInfos确实发生了更新
      if (prevState.fileInfos !== this.state.fileInfos) {
          console.log('check 2', this.state.fileInfos)
      }
  }
  

至于你说其他相同方法的项目能正常运行，大概率是那些项目没有在setState后立即读取state，而是在组件渲染时使用state——React会在状态更新后自动重新渲染组件，此时render里的this.state.fileInfos已经是最新值了，所以不会出现问题。

内容的提问来源于stack exchange，提问作者user8630615