React Moralis条件渲染匹配用户名的映射组件无内容无报错问题

你遇到的无渲染问题主要由以下几处代码错误导致，按优先级修复即可：

• 核心原因：Redpit组件中map遍历没有返回值
  你在map的回调函数里用大括号包裹了三元判断，但没有添加return关键字，导致map返回的全是undefined，自然没有内容渲染。同时你额外做了JSON序列化再反序列化的冗余操作，还重复调用了两次useMoralis，没有处理用户未登录的边界情况。
• 次要问题：Userpost组件逻辑冗余
  你已经在父组件做了作者匹配判断，子组件不需要再全量查询Posts表，直接把匹配到的单条post数据通过props传入即可，避免重复请求和多余的遍历逻辑。
• 其他隐患：useEffect写法错误，React中class属性需要改为className，没有处理useMoralisQuery的加载和错误状态。

修复后代码 #

Redpit组件 #

import { useState } from "react";
import { useMoralis, useMoralisQuery } from "react-moralis";
import Userpost from "./Userpost"; // 请根据实际路径调整导入

function Redpit() {
    // 合并重复的useMoralis调用
    const { authenticate, isAuthenticated, user, Moralis, isInitialized } = useMoralis();
    const [isActivated, setisActivated] = useState(false);
    const { data: posts, error, isLoading } = useMoralisQuery("Posts");

    // 原有冗余useEffect可直接删除，useMoralisQuery已经完成数据查询逻辑
    // 边界状态处理
    if (isLoading) return <div>数据加载中</div>;
    if (error) return <div>数据加载错误：{error.message}</div>;
    if (!isAuthenticated || !user) return <div>请先登录账号</div>;

    return(
        <div className="pit-post">
            <figure>
                <span><i className="fa fa-bolt"></i></span>
                <i className="fa fa-image"></i>
            </figure>
            {posts.map((result) => {
                // 补充return返回需要渲染的组件，同时传入匹配到的单条post数据
                return user.get("username") === result.author.username ? <Userpost key={result.id} post={result} /> : null                                
            })}
        </div>
    )
}
export default Redpit;

Userpost组件 #

function Userpost({ post }) {
    // 直接使用父组件传入的单条post数据，不需要二次查询和遍历
    return (
        <div className="central-meta item">
            <div className="pit-post">
                <figure>
                    <img src="images/resources/red-post2.jpg" alt="" />
                    <i className="fa fa-video"></i>
                </figure>
                <div className="pit-post-deta">
                    <h4><a href="social-post-detail.html" title="">{post.title}</a></h4>
                </div>
            </div>
        </div>
    )
}
export default Userpost

内容的提问来源于stack exchange，提问作者godtrianglefd