Reactjs 获取项目详细信息反应/重复使用挂钩

我正在用Redux和React的钩子构建一个电子商务项目，我被如何获得每个项目的详细信息难住了。单击该项时，无论使用当前设置单击哪个项，我都只检索数组中第一项的详细信息。当我使用state.products.find（item=>item.id==item）代替下面的details const代码时，我得到一个TypeError：无法读取未定义的属性x。感谢您的帮助

function App() {
  return (
      <Provider store={store}>
      <Navbar/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path='/products' component={Products}/>
          <Route exact path="/products/:prodId" component={ProductDetail}/>
          <Route exact path="/cart" component={Cart}/>
        </Switch>
      </Provider>
  );
}

行动

    const api = 'http://localhost:8000/products'
export const getProds = ()=> dispatch =>{
    console.log('fethcin')
    fetch(api)
    .then(res =>res.json())
    .then(data => {
        // return {type: GET_PRODUCTS, payload:data}
        dispatch({type: types.GET_PRODUCTS, payload:data});
    }
    )
}

export const getDetails = id => dispatch => {
     dispatch({type: types.GET_ITEM, payload: id})
}

产品

const Product = ({product}) => {

const dispatch = useDispatch()

const {id, title, price, isFreeShipping} = product

return (
    <div className='prod-container'>
    <div className="product">
        <h2 className='prod-title'>{title}</h2>
       <p className='prod-price'>{price}</p>
       <span className='prod-ship'>{isFreeShipping}</span>
       <button onClick={()=> dispatch(getDetails(id))}><Link to={{pathname:`/products/${id}`}}> View More </Link> </button>
       {/* <button  className='btn prod-details'>View Item</button> */}
    </div>
    </div>
)

constproduct=（{Product}）=>{
const dispatch=usedpatch（）
const{id，title，price，isFreeShipping}=product
返回(
{title}
{price}
{isFreeShipping}
dispatch（getDetails（id））}>查看更多信息
{/*查看项目*/}
)

}

细节

const ProductDetail = ({match}) => {
const product = match.params.prodId

const details = useSelector(state => state.products.items.find(item => item.id === product))

const {sku, count, title, description, availableSizes, price, isFreeShipping} = details

return (
    <div className='prodDetaul'>
        <p>{title}</p>
        <p>{description}</p>
        <p>{price}</p>
        <p>{isFreeShipping}</p>
         <p>{availableSizes}</p>
         <p>{sku}</p>
         <Counter count={count}/>
         <button className='btn btn-chkot'><Link to='/cart'>Cart</Link></button>
    </div>
)

constproductdetail=（{match}）=>{
const product=match.params.prodId
const details=useSelector（state=>state.products.items.find（item=>item.id==product））
const{sku，count，title，description，availableSizes，price，isFreeShipping}=details
返回(
{title}

{说明}

{price}

{isFreeShipping}

{availableSizes}

{sku}

运货马车
)

---

}

这一行有问题：

const details = useSelector(state => state.products.items.find(item => item.id))

该声明的基本意思是：

在

state.products.items

中查找具有id的第一个项目

实际上，您需要传入一个参数，例如，单击项的ID。可能是这样的：

const details = useSelector(state => state.products.items.find(item => item.id === myItemId))

由于您使用的是

react router

，因此可以使用

props.match.params.ID

获取产品ID

最终解决办法：

const ProductDetail = ({ match }) => {
    const productId = match.params.id
    const details = useSelector(state => state.products.items.find(item => item.id === productId))
    // ...
}

---

如果没有工作代码示例，这将有点难以调试。您提供给codesandbox的链接似乎没有复制您的问题，正如您所描述的，感谢您在这方面的帮助。我想这就是为什么，因为我至少能买一件东西。我已经根据您的示例修改了代码，但仍然无法检索单个项，并且仍然存在未定义的类型错误。我认为问题可能在于获取项目的操作。查看您的代码，可能是因为您的redux没有

状态.products.items

，而是

状态.items

。试试看。嗯，我会试试看，rootReducer是使用combinereducer（下面的代码）格式化为“products:productReducer”的，这就是为什么我会包括products。那有关系吗？导出默认合并还原程序（{products:productReducer}），如果是这种情况，

state.products.items

是正确的。请解决它。我只是将product obj传递到getDetails函数中，而不是id，并将useSelector fn更新为useSelector（state=>state.products.prodId），而不是find（），这就成功了。

const ProductDetail = ({ match }) => {
    const productId = match.params.id
    const details = useSelector(state => state.products.items.find(item => item.id === productId))
    // ...
}