如果我在axios .then函数之外的console.log，看不到我的状态更新

Question

我正在尝试让React中的Api和Axios调用弄脏我的手。我有这个问题。在componentDidMount内部，我有这个axios调用：

componentDidMount() {
  axios.get("https://api.imgflip.com/get_memes").then(res => {
    const allMemeImgs = res.data.data.memes;

    this.setState({ allMemeImgs });

    console.log(this.state.allMemeImgs[0]);
  });
}

在初始状态下，我已声明一个空数组：

this.state ={
  allMemeImgs: []
}

现在，如果我在Axios get请求中管理控制台日志，我可以看到我的状态已更新。但是，如果我尝试登录外部，它们会给我一个错误或一个空数组。因此，这可能意味着状态实际上并未使用api数据进行更新。我在那儿想念什么？谢谢

Answer 1

setState是异步的，如果要查看所做的更改，则必须执行。

componentDidMount() {
  axios.get("https://api.imgflip.com/get_memes").then(res => {
    const allMemeImgs = res.data.data.memes;

    this.setState({ allMemeImgs }, () => {
      console.log(this.state.allMemeImgs[0]);
    });
  });
}

您应该使用setState回调来保证状态的更改。

了解有关setState here的更多信息>

Answer 2

当您可以呼叫axios.get时，它返回一个Promise。