React项目点击商品跳转详情页匹配数据后控制台出现undefined问题

核心原因定位 #

你遇到的「先打印匹配对象、后打印undefined」的现象，本质是组件触发了至少两次渲染，第二次渲染时匹配逻辑无可用匹配项，以下是按出现概率排序的排查方向：

1. 路由参数匹配错误 #

• 先检查App.js的路由配置，路径参数名必须和取值逻辑一致：
  路由必须明确声明参数：<Route path="/product/:title" element={<ProductDetail />} />
  详情页取值必须对应参数名：const { title } = useParams()
• 标题存在特殊字符/空格时会出现编码不匹配：
  列表页跳转前先编码标题：navigate(/product/${encodeURIComponent(item.title)})
  详情页取值后先解码再匹配：const matchTitle = decodeURIComponent(title)

2. 异步请求时序逻辑错误 #

• 大概率是state初始值/依赖项配置问题：
  详情页如果把产品列表state初始值设为[]/undefined，未判断数组合法性就直接执行find，会返回undefined。修改请求逻辑如下：

  useEffect(() => {
    fetch('你的json-server产品接口地址')
      .then(res => res.json())
      .then(products => {
        // 先判断返回结果是合法数组再执行匹配
        if (Array.isArray(products) && products.length) {
          const targetProduct = products.find(item => item.title === matchTitle)
          setProduct(targetProduct)
        }
      })
  // 依赖项只加解码后的标题，避免多余触发
  }, [matchTitle])
  

3. 渲染未做空值兼容 #

• 第一次渲染时异步请求还未返回，product为初始值，直接读取属性会报错，渲染前先做空值判断：

  // 组件渲染逻辑最前面加加载态判断
  if (!product) return <div className="text-center mt-5">加载中...</div>
  
  // 后续渲染逻辑所有属性读取都加可选链兜底
  return <div className="container">
    <h2>{product?.title}</h2>
    <p>{product?.desc}</p>
  </div>
  

4. 最优优化方案 #

不建议用title作为匹配字段，存在重复、特殊字符兼容问题，换成产品id作为路由参数完全避免匹配问题：

• 路由配置改为：<Route path="/product/:id" element={<ProductDetail />} />
• 列表页跳转时传id：navigate(/product/${item.id})
• 详情页直接请求对应产品，无需自行find：

  const { id } = useParams()
  useEffect(() => {
    fetch(`http://localhost:你的json-server端口/products/${id}`)
      .then(res => res.json())
      .then(data => setProduct(data))
  }, [id])
  

额外排查点 #

• 直接在浏览器访问json-server产品接口，确认返回的数组中每个对象的title字段拼写和大小写和匹配逻辑一致，不存在拼写错误
• 检查json-server启动正常，没有跨域、端口占用问题，请求响应码为200

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