Javascript 对象作为React子对象无效（找到：[对象承诺]）

我试图通过数组映射来呈现帖子列表。我以前做过很多次，但也有一些

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

renderPosts=async（）=>{
试一试{
let res=wait axios.get（'/posts'）；
设posts=res.data；
返回posts.map（（post，i）=>{
返回(
{post.text}
);
});
}捕捉（错误）{
控制台日志（err）；
}
}
渲染（）{
返回(

{this.renderPosts（）}

);
}

我得到的只是：

未捕获错误：对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组

我已经检查了从RenderPost返回的数据，它是一个具有正确值且没有承诺的数组。这是怎么回事？

this.renderPosts（）

将返回一个

承诺

而不是实际数据，并且AFAIK Reactjs将不会在

呈现

中隐式解析承诺

你需要这样做

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

componentDidMount（）{
这个.renderPosts（）；
}
renderPosts=async（）=>{
试一试{
const res=wait axios.get（'/posts'）；
const posts=res.data；
//这将使用新数据重新渲染视图
这是我的国家({
职位：职位
});
}捕捉（错误）{
控制台日志（err）；
}
}
render（）{
const posts=this.state.posts？.map（（post，i）=>(
{post.text}
));
返回(

{posts}

);
}

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

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

const HelloApp=async（props）=>{/可怜的我

对于任何使用jest测试的人

尝试调用函数时，子级会收到此错误

请检查：

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

不是

使用React钩子：

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

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

import React，{useState，useffect}来自“React”
const ShowPosts=（）=>{
const[posts，setPosts]=useState（[]）；
useffect（异步（）=>{
试一试{
const res=wait axios.get（'/posts'）；
设置柱（res.data）；
}捕捉（错误）{
控制台日志（err）；
}
}, []); 
返回{posts}
}
您只能从react返回1个对象。您需要将return posts.map更改为const someVar=posts.map，然后返回
{someVar}
…这样，您将返回一个已包装的对象。虽然第一条注释为true，但更大的问题是，您试图从一个异步方法返回JSX，但该方法不起作用。您需要在
componentDidMount（）中获取异步数据
并调用
this.setState
当您的api返回而不是直接返回JSX时，我以前用componentWillMount尝试过这个，因为我认为这是问题所在，但它不起作用。只是用componentDidMount做了，它就起作用了！谢谢azium。这也帮助我修复了它-stacktrace并没有真正泄露这一点这就是问题所在！类组件中的
render
函数都不能是异步的，即返回
Promise
。确切地说。我没有直接在功能组件上实现async/await，而是在功能组件中添加了useffect钩子，如下所示
useffect（async（）=>{//code with await关键字here}，[]）
一切正常
import React, {useState, useEffect} from "react"

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