![](/img/trans.png)
[英]Objects not valid as a React child (found: [object Promise])
[英]Objects are not valid as a React child (found: [object Promise])
我正在尝试通过数组映射来呈现帖子列表。 我以前做过很多次,但出于某种原因
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 不会在render
隐式解析Promise
。
你需要这样做
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>
);
}
创建异步功能组件时,我也收到了相同的错误消息。 功能组件不应该是异步的。
const HelloApp = async (props) => { //<<== removing async here fixed the issue
return (
<div>
<h2>Hello World</h2>
</div>
)
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))
使用反应钩子:
更新 2020-08-01:修改@ajrusllaudio 的建议。
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>
}
可怜的我
对于任何使用开玩笑测试的人
并尝试调用函数 children 然后收到此错误
请检查:
const children = jest.fn().mockReturnValueOnce(null)
不是
const children = jest.fn().mockRejectedValue(null);
如果您使用 Next.js,您可以使用:将您的代码放入 {},如果您有一些连接或一些需要时间的计算,请将await
添加到 {} 中的代码。
import { useEffect } from 'react'
useEffect(async () => {.......},[])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.