React路由跳转无法获取Item ID的问题求助

问题描述 #

已将data.json数据导入React组件，通过useSearchParams实现了按category筛选数据的功能。点击菜品图片时希望携带对应item的id跳转到详情页，但当前跳转URL显示为/Food/undefined，预期应为/Food/1这类格式。

错误原因 #

代码中Link组件的to属性错误使用了Data.id，Data是整个菜品数组，本身不存在id属性，应该使用循环遍历的当前项item.id来获取对应菜品的id。另外，map遍历列表时缺少唯一key属性，这也是React列表渲染的必要规范。

修正后的代码 #

import React from 'react'
import Data from './data.json'
import '../index.css'
import { useSearchParams, Link } from 'react-router-dom'

export default function Home() {
  const [ searchParams, setSearchParams ] = useSearchParams()

  const typeFilter = searchParams.get("category")

  const foodType = typeFilter ? Data.filter(item => item.category === typeFilter) : Data

  return (
    <div>
      <h1 className="text-center font-bold text-2xl mt-7">Food Menu</h1>
      <div className="italic text-center my-5 mx-8 font-semibold">
        <p>** All beef burgers come standard with lettuce, tomato, pickles, and onions. **</p>
        <p>** All chicken sandwiches come standard with lettuce and mayo. **</p>
      </div>
      <div>
        <button 
          onClick={() => setSearchParams({category: "burger"})}
          className={`filterbuttons hover:scale-[105%] ease-in-out duration-75 
                     ${typeFilter === "burger" ? "selected" : ""}`}
        >
          Burgers
        </button>
        <button 
          onClick={() => setSearchParams({category: "sides"})}
          className={`filterbuttons hover:scale-[105%] ease-in-out duration-75 
                     ${typeFilter === "sides" ? "selected" : ""}`}
        >
          Sides
        </button>
        <button 
          onClick={() => setSearchParams({category: "desert"})}
          className={`filterbuttons hover:scale-[105%] ease-in-out duration-75 
                     ${typeFilter === "desert" ? "selected" : ""}`}
        >
          Desert
        </button>
        <button 
          onClick={() => setSearchParams({})}
          className={`filterbuttons hover:scale-[105%] ease-in-out duration-75 
                     ${typeFilter === null ? "selected" : ""}`}
        >
          All
        </button>
      </div>
      <div className="flex flex-wrap">
        {foodType.map(item => {
          return (
            <div key={item.id} className="menuitems hover:scale-[105%] ease-in-out duration-75 mx-auto bg-white">
              <Link to={`/Food/${item.id}`}>
                <h3>{item.title}</h3>
                <p>{item.info}</p>
                <img src={item.pic} className="foodpics" />
              </Link>
            </div>
          )
        })}
      </div>
    </div>
  )
}

关键修改点 #

• 将Link to={/Food/${Data.id}}改为Link to={/Food/${item.id}}，获取当前遍历项的id
• 在map生成的<div>上添加key={item.id}，满足React列表渲染的key要求

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