對象作為 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 返回的數據，它是一個具有正確值且沒有承諾的數組。 這里發生了什么？

Answer 1

this.renderPosts()將返回Promise而不是實際數據，AFAIK Reactjs 不會在render隱式解析Promise 。

你需要這樣做

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

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"))

jsfiddle

Answer 3

使用反應鈎子：

更新 2020-08-01：修改@ajrusllaudio 的建議。

import React, {useState, useEffect} from "react"

const ShowPosts = () => {
    const [posts, setPosts] = useState([]);
    
    useEffect( () => { 
        async function fetchData() {
            try {
                const res = await axios.get('/posts'); 
                setPosts(res.data);
            } catch (err) {
                console.log(err);
            }
        }
        fetchData();
    }, []);
    return <div>{posts}</div>
}

Answer 4

可憐的我

對於任何使用開玩笑測試的人

並嘗試調用函數 children 然后收到此錯誤

請檢查：

const children = jest.fn().mockReturnValueOnce(null)

不是

const children = jest.fn().mockRejectedValue(null);

Answer 5

如果您使用 Next.js，您可以使用：將您的代碼放入 {}，如果您有一些連接或一些需要時間的計算，請將await添加到 {} 中的代碼。

import { useEffect } from 'react'

useEffect(async () => {.......},[])