小编典典

对象作为React子对象无效(找到:[object Promise])

reactjs

我正在尝试通过数组映射来呈现帖子列表。我已经做过很多次了,但有一些

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


阅读 873

收藏
2020-07-22

共1个答案

小编典典

this.renderPosts()将返回Promise非实际数据,并且AFAIK Reactjs将不会在中隐式解析Promises
render

你需要这样

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>
  );
}
2020-07-22