javascript - 对象作为 React 子级无效:尝试显示我的帖子
问题描述
我的 React 和 Python 项目有问题,我正在从我的 API 中获取帖子并尝试在屏幕上显示它们,但我收到此错误:
错误:对象作为 React 子级无效(找到:带有键 {Post} 的对象)。如果您打算渲染一组子项,请改用数组。
我正在使用一个额外的包来帮助我进行无限滚动,但它不起作用。我认为问题在于concat
方法的使用。
当我向我的项目添加请求时,此问题开始出现POST
,但这是一个GET
请求,所以..
const Crypto = (props) => {
const [posts, setPosts] = useState([]);
const [skip, setSkip] = useState(0);
const [hasMore, setHasMore] = useState(true);
useEffect(() => {
loadFunc();
}, []);
const loadFunc = () => {
axios
.get(API_CRYPTO + skip)
.then((res) => {
if (res.data.messages.length === 0) {
setHasMore(false);
return;
}
setPosts(posts.concat(res.data.messages)); // here is the problem!
setSkip(skip + 20);
})
.catch((err) => {
// handle error
console.error(err);
});
};
return (
<InfiniteScroll
dataLength={posts.length} //This is important field to render the next data
next={loadFunc}
hasMore={hasMore}
loader={
<div className="spinner">
<PuffLoader color={"#ffcb6b"} size={50} />
</div>
}
scrollableTarget="scrollableDiv"
>
{posts.map((post) => (
<Post
channel_id={post.channel_id}
channel_pp={post.channel_image}
message={post.message_text}
channelName={post.channel_nickname}
timeStamp={post.message_ts}
moonCounter={post.likes}
messageImage={(post.photo_params || 0 || {}).photo_url}
postID={post._id.$oid}
key={post._id.$oid}
/>
))}
</InfiniteScroll>
);
};
这是我的Post
组件返回的内容:
<Card id="card">
<img src={Dots} alt="dots" className="dots"/>
<NavLink to={"/" + props.channel_id} style={{ textDecoration: 'none'}} className="pp-link">
<img src={props.channel_pp} alt="pp" className="pp" />
<p className="pp-user-name" to={"/" + props.channel_id}>{props.channelName}</p>
</NavLink>
<p className="time-elapsed">{postedAgo}</p>
{props.messageImage ? <img className="message-img" alt="message-img" src={props.messageImage} onClick={ModalHandler}/> : null}
<Linkify componentDecorator={componentDecorator}>
<p className="post-body">
{props.message}
</p>
</Linkify>
<div className="interact">
<Comment/>
<Moon moonCounter={props.moonCounter} postID={props.postID} />
</div>
</Card>
解决方案
问题已解决!
这是一个服务器错误,我的新帖子与其他帖子的对象值不同,这是一个后端错误,非常感谢您的帮助!
推荐阅读
- regex - 正则表达式从括号中获取数据
- javascript - Aligning Carousel Items with Jquery
- spring - 如何使用 LocalDate 从 spring 中查询 elasticsearch
- sql - 如何将 xml 标签中的值分隔到 SQL 中的新行中
- c++ - what does operator"" overloading mean in C++?
- javascript - javascript中的刽子手,当字母错误时返回总是正确的
- react-jsonschema-forms - Custom ui:widget will not alter the formData
- typo3 - RealURL 无法找到域“xyz.com”的根页面 ID
- java - java中十进制数字的总和
- java - SAML 失败响应中的颁发者