React项目props传数组延迟打印、子组件可打印但无法渲染问题排查

问题根因 #

• 核心问题是数据类型不匹配导致过滤失效：useParams() 获取的路由参数 id 是字符串类型，而你 product.json 中存储的商品 id 是数字类型，使用严格相等运算符 === 判断时永远不成立，filter 方法返回空数组，自然没有内容渲染。
• 你看到的先打印空数组是正常的异步逻辑：组件初始化时 details 为空数组，2秒后Promise执行完成才会更新状态传入真实商品数据，这个现象本身没有问题。

修复方案 #

1. 修正过滤逻辑的类型匹配 #

将 ItemDetail 组件中的过滤条件修改为类型一致后再比较，推荐写法：

// 把路由id转成数字后再比较
descripcion.filter(desc => desc.id === Number(id))

2. 代码优化（推荐） #

你要匹配的是单个商品，用 find 方法比 filter+map 更高效，同时可以增加加载态和兜底逻辑提升体验，修改后的 ItemDetail 代码如下：

import { useParams } from "react-router"

const ItemDetail = ({descripcion}) => {
    const { id } = useParams();
    // 数据加载中提示
    if (!descripcion.length) return <p>商品详情加载中...</p>
    // 查找对应id的商品
    const targetGoods = descripcion.find(item => item.id === Number(id))
    // 未找到对应商品的兜底提示
    if (!targetGoods) return <p>未查询到对应商品信息</p>

    return (
        <>
            <div className="produc-desc" id={id}>
                <div className="full-card">
                    <h2>{targetGoods.name}</h2>
                    <img src={targetGoods.pictureURL} alt={targetGoods.name} id="picture-store"/>
                    <p>{targetGoods.price}</p>
                    <h4 id="texto-descripcion">{targetGoods.description}</h4>
                </div>
            </div>
        </>
    )
}

export default ItemDetail

额外注意点 #

• React中DOM属性要使用驼峰写法，ItemDetailContainer 里按钮的 class 属性要改成 className，避免控制台警告。
• 返回按钮的路由配置 to="/category/:id" 中的 :id 是路由占位符，要替换为实际的分类id值，否则跳转后路由参数会异常。

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