React函数组件中无法读取Item组件Props属性问题求助

核心原因 #

你在Item组件中犯了一个React props使用的常见错误：函数组件的第一个参数是完整的props对象，而非你传递的单个item属性。

你写的const Item = (item) => {...}里，这个item变量其实是包含所有传递属性的props对象，你需要的酒品数据是这个对象里的item属性。所以直接访问item.name时，相当于在访问props.name，而该属性并不存在，因此返回undefined。

两种修复方法 #

方法1：解构props（推荐） #

直接从props对象中解构出item属性，代码更简洁清晰：

const Item = ({ item }) => {
  return (
    <>
      <Header />
      <div className="item_container">
          <img className="item_image" alt={item.name} src={item.image} />
          <h1 className="item_name">{item.name}</h1>
          <h3 className="item_price">{item.price}</h3>
      </div>
      <Footer />
    </> 
  )
}

方法2：直接访问props对象的item属性 #

若不想解构，可将参数命名为props，通过props.item访问酒品数据：

const Item = (props) => {
  return (
    <>
      <Header />
      <div className="item_container">
          <img className="item_image" alt={props.item.name} src={props.item.image} />
          <h1 className="item_name">{props.item.name}</h1>
          <h3 className="item_price">{props.item.price}</h3>
      </div>
      <Footer />
    </> 
  )
}

额外优化：改用动态路由（推荐） #

你当前通过循环wines数组生成多个Route的方式，在酒品数量较多时会冗余。可以改用React Router的动态路由简化实现：

1. 修改路由配置，仅保留一个动态路径的Route：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/products" element={<Products wines={products}/>} />
    <Route path="/contact" element={<Contact />} />
    <Route path="/cart" element={<Cart />} />
    {/* 动态路由，用:wineId捕获URL中的酒品ID */}
    <Route path="/shop/:wineId" element={<Item wines={wines} />}/>
  </Routes>
</BrowserRouter>

2. 修改Item组件，通过useParams获取URL中的ID，匹配对应酒品：

import { useParams } from 'react-router-dom';

const Item = ({ wines }) => {
  // 获取URL中的wineId参数
  const { wineId } = useParams();
  // 从wines数组中找到对应ID的酒品
  const item = wines.find(wine => wine.id === wineId);

  // 处理酒品不存在的情况
  if (!item) {
    return <div>抱歉，该酒品不存在</div>;
  }

  return (
    <>
      <Header />
      <div className="item_container">
          <img className="item_image" alt={item.name} src={item.image} />
          <h1 className="item_name">{item.name}</h1>
          <h3 className="item_price">{item.price}</h3>
      </div>
      <Footer />
    </> 
  )
}

这种方式无需为每个酒品单独创建Route，代码更简洁易维护。

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