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 {
    let res = await axios.get('/posts');
    let posts = res.data;
    // this will re render the view with new data
    this.setState({
      Posts: posts.map((post, i) => (
        <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.state.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

可怜的我

对于任何使用 jest 测试的人

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

请检查：

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

不是

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

Answer 4

使用 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>
}

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

4 个答案: