Reactの子としてオブジェクトが有効でない（found: [object Promise）

質問

配列にマッピングして投稿のリストをレンダリングしようとしています。私は前に何度もこれをやったことがありますが、何らかの理由で

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>
    );
  }

しか出てきません。

Uncaught Error: オブジェクトは React の子として有効ではありません (found: [object Promise])。もし子供のコレクションをレンダリングするつもりなら、代わりに配列を使用してください。

renderPostsから返されたデータを確認したところ、正しい値を持つ配列であり、プロミスはありません。ここで何が起こっているのでしょうか?

どのように解決するのですか？

this.renderPosts() が返されます。 Promise を返すだけで、実際のデータではありません。 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>
  );
}