[英]Objects are not valid as a React child (found: [object Promise])
I am trying to render a list of posts by mapping through an array.我正在尝试通过数组映射来呈现帖子列表。 I've done this many times before but for some reason
我以前做过很多次,但出于某种原因
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>
);
}
All I get is:我得到的是:
Uncaught Error: Objects are not valid as a React child (found: [object Promise]).
未捕获的错误:对象作为 React 子项无效(发现:[object Promise])。 If you meant to render a collection of children, use an array instead.
如果您打算渲染一组子项,请改用数组。
I've checked the data returned from renderPosts and it is an array with the correct values and no promises.我检查了从 renderPosts 返回的数据,它是一个具有正确值且没有承诺的数组。 What's going on here?
这里发生了什么?
this.renderPosts()
will return a Promise
not the actual data, and AFAIK Reactjs will not resolve Promises implicitly in render
. this.renderPosts()
将返回Promise
而不是实际数据,AFAIK Reactjs 不会在render
隐式解析Promise
。
You need to do it like this你需要这样做
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>
);
}
I also received the same error message when creating an async functional component.创建异步功能组件时,我也收到了相同的错误消息。 Functional components should not be async.
功能组件不应该是异步的。
const HelloApp = async (props) => { //<<== removing async here fixed the issue
return (
<div>
<h2>Hello World</h2>
</div>
)
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))
Using React Hooks:使用反应钩子:
UPDATE 2020-08-01: Amended with @ajrussellaudio's suggestion.更新 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>
}
Poor me可怜的我
For anyone using jest test对于任何使用开玩笑测试的人
And trying to call a function children then received this Error并尝试调用函数 children 然后收到此错误
please check:请检查:
const children = jest.fn().mockReturnValueOnce(null)
NOT不是
const children = jest.fn().mockRejectedValue(null);
If you use Next.js you can use this: Put your codes in {}, if you have some connection or some calculations thats need time, add await
to your codes in {}.如果您使用 Next.js,您可以使用:将您的代码放入 {},如果您有一些连接或一些需要时间的计算,请将
await
添加到 {} 中的代码。
import { useEffect } from 'react'
useEffect(async () => {.......},[])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.