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

IT技术 javascript reactjs
2021-03-29 02:48:02

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

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 返回的数据，它是一个具有正确值且没有Promise的数组。这里发生了什么？

5个回答

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>
  );
}
2021-05-31 02:48:02

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

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

提琴手

@EranG async func' 应该像这样 useEffect( () => { async function fetchData(){ //code with await 关键字 } fetchData(); }, []); useEffect 回调不能是异步的。
2021-05-24 02:48:02
这为我修复了它 - 堆栈跟踪并没有真正透露这是问题所在！
2021-05-25 02:48:02
render类组件中的两个函数都不能是异步的，即返回 a Promise。
2021-06-08 02:48:02
确切地。我没有直接在功能组件上实现 async/await，而是像这样在功能组件中添加了 useEffect 钩子，useEffect(async () => {//code with await keyword here}, [])并且一切正常
2021-06-10 02:48:02

使用 React 钩子：

2020-08-01 更新：根据@ajrussellaudio 的建议进行修正。

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>
}
@ajrussellaudio 但他可以这样做... useEffect( () => { async function fetchData(){ try { const res = await axios.get('/posts'); setPosts(res.data); } catch ( err) { console.log(err); } } fetchData(); }, []);
2021-05-25 02:48:02
该useEffect回调不能async，在指出了这篇文章被中引用的文档
2021-06-20 02:48:02

可怜的我

对于任何使用玩笑测试的人

并尝试调用函数 children 然后收到此错误

请检查：

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

不是

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

如果您使用 Next.js，您可以这样使用：将您的代码放在 {} 中，如果您有一些连接或某些需要时间的计算，请将其添加await到 {} 中的代码中。

import { useEffect } from 'react'

useEffect(async () => {.......},[])
其它你可能感兴趣的问题
上一篇如何使用 TypeScript 2.3 中新增的支持来限制 TypeScript 中 React Children 的类型？ 下一篇如何从 reactjs 组件访问“key”属性