0

Estou tentando renderizar alguns produtos vindos da minha api, porém recebo este erro: TypeError: Cannot read property 'map' of undefined

Segue o código da action:

export const listProducts = () => async (dispatch) => {
    dispatch({
      type: PRODUCT_LIST_REQUEST,
    });
    try {
      const { data } = await axios.get('/api/products');
      dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
    } catch (error) {
      dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
    }
  };

Código do reducer:

export const productListReducer = (state = { loading: true, products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true };
    case PRODUCT_LIST_SUCCESS:
      return {
        loading: false,
        products: action.payload.products,
      };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

E por fim, código da página que será renderizada:

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { listProducts } from '../../../actions/productActions';
import './style.css';

export default function PageProducts() {
    const dispatch = useDispatch();
    const productList = useSelector((state) => state.productList);
    const { products } = productList;

    useEffect(() => {
        dispatch(listProducts());
    }, [dispatch]);

    return (
        <>
            <section className="card-last-prod">
                <h2>Últimos produtos</h2>
                <div className="card-last-pro-grid">
                    {products.map((product) => (
                        <div key={product._id} className="card-last-prod-item">
                            <Link to="/">
                                <div className="card-last-prod-item-img">
                                    <img src={product.img} alt="" />
                                </div>
                                <div className="btn">
                                    <button> Detalhes</button>
                                </div>
                                <p>{product.name}</p>
                            </Link>
                        </div>
                    ))}
                </div>
            </section>
        </>
    )
}

2 Respostas 2

0

O reducer por padrão sempre retorna um objeto NOVO para colocar no estado, sendo assim na sua ação PRODUCT_LIST_REQUEST você precisa retornar a lista products :

 case PRODUCT_LIST_REQUEST:
  return { products: [], loading: true };

ou o estado anterior, a forma mais comum de se fazer que é sempre copiar o que tinha no estado, mudando apenas a propriedade desejada:

 case PRODUCT_LIST_REQUEST:
  return { ...state, loading: true };
2
  • Fiz o que disse, continuo com o mesmo erro. Já chequei o path no axios, já fiz requisições de autenticação também e está tudo ok..inclusive a requisição de produtos funciona normalmente no insomnia, não sei o que pode ser isso.
    – Regex
    Commented 28/07/2021 às 22:32
  • Como está o retorno da api? Commented 28/07/2021 às 22:57
-2

Também estou com o mesmo problema que a pessoa, só coloquei a imagem que provavelmente é o mesmo problema, só queria ajuda também lol

meu código O problema é que por algum motivo ele fica dando erro na leitura do código

inserir a descrição da imagem aqui

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 4/12/2021 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .