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。

Promise不会立即解决。那就是执行then块的代码时（在兑现承诺之后）。

现在，console.log之后的axios会在调用axios.get后立即执行，不是在您收到响应后。

>

在这里，您可以在then块中设置状态-如：

axios
    .get(url)
    .then(response => {
        // here you get the response - it may take time for this code to be executed
        // set your state here
        console.log(response);
    }
// this will be executed as your code will not know to wait for the response
console.log(state.response); // you'll not get the response here as this is 
                             // executed before the promise has resolved.

还有一个更简洁的版本-async/await。如果您可以花一些时间来了解回调，promise和异步/等待的工作方式（按该顺序），那么所有工作都是值得的。

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

2 个答案: