Question

我正在使用Redux和React的钩子构建一个电子商务项目，而我对如何获取每个项目的详细信息感到困惑。单击该项目时，无论使用当前设置单击哪个项目，我都只会检索数组中第一个项目的详细信息。当我使用state.products.find（item => item.id === item）而不是下面的详细信息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 initialState = {
    items:[],
    prodId: {},
    count: 0
 }

export default function (state = initialState, {payload,type}){
    switch(type){
        case types.GET_PRODUCTS:
            return{
                ...state,
                items: payload,
            }
        case types.GET_ITEM:
            return{
                ...state,
                prodId: payload
            }
            default:
                return state;

    }  
}

动作

    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>
)

}

详细信息

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>
)

}

Answer 1

问题出在这一行：

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))
    // ...
}

获取项目详细信息react / redux钩子

1 个答案: