我正在尝试通过数组映射来呈现帖子列表。我已经做过很多次了,但有一些
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返回的数据,它是一个具有正确值且没有承诺的数组。这里发生了什么?
this.renderPosts()将返回Promise非实际数据,并且AFAIK Reactjs将不会在中隐式解析Promises render。
this.renderPosts()
Promise
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> ); }