对象作为 React 子项无效（找到：\[object Promise\]）

Question

我正在尝试通过数组映射来呈现帖子列表。我以前做过很多次，但出于某种原因

renderPosts = async () => {
    try {
      let res = await axios.get('/posts');
      let posts = res.data;
      return  posts.map((post, i) => {
        return (
          <li key={i} className="list-group-item">{post.text}</li>
        );
      });
    } catch (err) {
      console.log(err);
    }
  }

  render () {
    return (
      <div>
        <ul className="list-group list-group-flush">
          {this.renderPosts()}
        </ul>
      </div>
    );
  }

我得到的是：

未捕获的错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染子集合，请改用数组。

我已经检查了从 renderPosts 返回的数据，它是一个具有正确值但没有承诺的数组。这里发生了什么？

原文由 Aaron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

this.renderPosts() 将返回 Promise 而不是实际数据，并且 AFAIK Reactjs 不会隐式解析 render 中的承诺

你需要这样做

componentDidMount() {
  this.renderPosts();
}

renderPosts = async() => {
  try {
    const res = await axios.get('/posts');
    const posts = res.data;

    // this will re render the view with new data
    this.setState({
      Posts: posts
    });
  } catch (err) {
    console.log(err);
  }
}

render() {
  const posts = this.state.Posts?.map((post, i) => (
    <li key={i} className="list-group-item">{post.text}</li>
  ));

  return (
    <div>
      <ul className="list-group list-group-flush">
        {posts}
      </ul>
    </div>
  );
}

原文由 Ja9ad335h 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在创建异步功能组件时也收到了相同的错误消息。功能组件不应该是异步的。

 const HelloApp = async (props) =>  { //<<== removing async here fixed the issue
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  )
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))

小提琴手

原文由 Padhraic 发布，翻译遵循 CC BY-SA 4.0 许可协议