async/await 不适用于 ComponentDidMount 中的 react.js

Posted 2023-03-07

【中文标题】async/await 不适用于 ComponentDidMount 中的 react.js

【英文标题】：async/await is not working with react.js inside ComponentDidMount

【发布时间】：2019-12-06 05:04:51

【问题描述】：

我正在尝试使用 axios 获取数据。 此代码有效：

componentDidMount()
    const posts = axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(posts);

但这不是：

async componentDidMount()
    const data = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(data)

知道为什么它不起作用吗？

【问题讨论】：

第一个 sn-p 不应该打印实际数据。您能否尝试将第二个代码包装在 try catch 中，以查看是否引发错误并且 console.log 没有因此而被击中。

阅读更多关于 Promises、async/await 的信息，相信我，你会在不知道它们是如何工作的情况下碰壁

您的代码中是否将componentDidMount 大写？这根本不可能工作，方法名称区分大小写。

嗨，daisy，阅读这个 - ***.com/help/someone-answers，然后尝试关闭问题。

【参考方案1】：

componentDidMount 没有什么特别之处可以阻止它异步。这个特殊问题看起来像 Axios 问题。使用fetch 很容易检查：

async componentDidMount() 
    const data = await fetch("https://jsonplaceholder.typicode.com/posts");
    console.log(await data.json())

【参考方案2】：

当您说“此代码有效”时，您指的不是很清楚： 控制台中的输出不会是您的帖子列表，对吧？

但你不需要使用async/await，它们只是语法糖。 调用axios.get同步返回的值是Promise，所以你也可以使用then和catch：

componentDidMount()
  axios.get("https://jsonplaceholder.typicode.com/posts")
    .then(console.log)
    .catch(console.error);

这样你就不需要async/await 支持反应，这似乎不是微不足道的正确设置，如本文所述：https://www.valentinog.com/blog/await-react/ 请注意，该组件无论如何都会render，因为它不知道您仍在等待数据加载。所以当数据加载并且你更新了你的状态时，它需要再次渲染。

【参考方案3】：

你的两个 sn-ps 都工作正常。

您的代码，

componentDidMount()
  const posts = axios.get("https://jsonplaceholder.typicode.com/posts");
  console.log(posts);

这里console.log(posts) 将只返回Promise 而不是实际数据。

并使用async/await，

async componentDidMount()
    const posts = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(posts);
    console.log(posts.data);
    console.log(JSON.stringify(posts.data))
    console.log(JSON.stringify(posts.data[0]));

这里也是，

console.log(posts) - 将返回 Promise 对象而不是实际数据

console.log(posts.data) - 这将返回实际的数据数组

console.log(JSON.stringify(posts.data)) - 这将返回 stringified 版本的实际数据

console.log(JSON.stringify(posts.data[0])) - 这将返回实际数据中第一条记录的stringified 版本。

Demo