Получить информацию о товаре реагировать / лишние крючки - PullRequest
Новая
       2

Получить информацию о товаре реагировать / лишние крючки

0 голосов
/ 03 февраля 2020

Я строю проект электронной коммерции, используя перехватчики для Redux и React, и я в тупик от того, как получить индивидуальные детали для каждого элемента. Когда я нажимаю на элемент, я получаю информацию только о первом элементе в массиве, независимо от того, какой элемент щелкается с текущей настройкой. Когда я использую state.products.find (item => item.id === item) вместо приведенного ниже кода для получения подробной информации const, я получаю TypeError: Cannot прочитать свойство x из undefined. Любая помощь приветствуется. 

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

}

1 Ответ

0 голосов
/ 03 февраля 2020

Проблема в этой строке: 

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

Что в основном означает это утверждение:

Найдите первый элемент в state.products.items, у которого имеет идентификатор .

На самом деле вам нужно передать параметр, скажем, идентификатор выбранного элемента. Может быть так: 

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

Поскольку вы используете react-router, вы можете получить идентификатор продукта с помощью props.match.params.id.

Окончательное решение: 

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