Estou com um erro, que não conseguir entender, depois que fazer todas as alterações o site abriu, porem na hora de incrementar a quantidade dos produtos, como: clicando pra adicionar o meus item no carrinho, ou clicando no botão de ( + ) para aumentar a quantidade, ele dá erro:
TypeError: Cannot read properties of undefined (reading 'quantidade')
at dados.reduce.quantidadeTemp (index.jsx:19:61)
at Array.reduce (<anonymous>)
at index.jsx:17:18
at updateMemo (react-dom.development.js:17246:19)
at Object.useMemo (react-dom.development.js:17886:16)
at useMemo (react.development.js:1650:21)
at MeuProvider (index.jsx:16:41)
at renderWithHooks (react-dom.development.js:16305:18)
at updateFunctionComponent (react-dom.development.js:19588:20)
at beginWork (react-dom.development.js:21601:16)
index.js da pasta context:
import { createContext, useReducer, useState } from "react";
import { carrinhoReducer } from "@/components/Reducer/carrinhoRedcuer";
import { useMemo } from "react";
import { useEffect } from "react";
export const Contexto = createContext();
Contexto.displayName = "ContextoCarrinho"
const estadoInicial = []
export const MeuProvider = ({ children }) => {
const [dados, dispatch] = useReducer(carrinhoReducer, estadoInicial)
const [quantidade, setQuantidade] = useState(0)
const [valorTotal, setValorTotal] = useState(0)
const { totalTemp, quantidadeTemp } = useMemo(() => {
return dados.reduce(
(acumulador, produto) => ({
quantidadeTemp: acumulador.quantidadeTemp + produto.quantidade,
totalTemp: acumulador.totalTemp + produto.preco * produto.quantidade,
}),
{
quantidadeTemp: 0,
totalTemp: 0,
}
);
}, [dados]);
useEffect(() => {
setQuantidade(quantidadeTemp);
setValorTotal(totalTemp);
});
return (
<Contexto.Provider value={{dados, dispatch, quantidade, setQuantidade, valorTotal, setValorTotal}}>
{ children }
</Contexto.Provider>
)
}
carrinhoReduce.js:
export const ADD_PRODUTO = "ADD_PRODUTO"
export const REMOVE_PRODUTO = "REMOVE_PRODUTO"
export const UPDATE_QUANTIDADE = "UPDATE_QUANTIDADE"
export const carrinhoReducer = (state, action) =>{
switch (action.type){
case ADD_PRODUTO:
const novoProduto = action.payload
const produto = state.findIndex( item => item.id === novoProduto.id )
if (produto === -1) {
novoProduto.quantidade = 1;
return [...state, novoProduto]
} else {
return state.map((item, index) => {
index === produto
? { ...item, quantidade: item.quantidade + 1}
: item
})
};
case REMOVE_PRODUTO:
const produtoId = action.payload;
return state.filter(item => item.id != produtoId);
case UPDATE_QUANTIDADE:
const {produtoId: id, quantidade} = action.payload
return state.map(item =>
item.produto = id && quantidade > 1 ? {...item, quantidade: item.quantidade} : item
);
default:
return state
}
}
useCarrinhoRedux.js:
import ItemCarrinho from "../components/ItemCarrinho";
import { Contexto } from "../context";
import { useContext } from "react";
import {
ADD_PRODUTO,
REMOVE_PRODUTO,
UPDATE_QUANTIDADE,
} from "../components/Reducer/carrinhoRedcuer";
const addProdutoAction = (novoProduto) => ({
type: ADD_PRODUTO,
payload: novoProduto,
});
const removeProdutoAction = (produtoId) => ({
type: REMOVE_PRODUTO,
payload: produtoId,
});
const updateQuantidadeAction = (produtoId, quantidade) => ({
type: UPDATE_QUANTIDADE,
payload: {produtoId, quantidade},
});
export const useCarrinhoContext = () => {
const { dados, dispatch, quantidade, valorTotal } = useContext(Contexto);
function adicionarProduto(novoProduto) {
dispatch(addProdutoAction(novoProduto))
}
function removerProdutoCarrinho(id) {
const produto = dados.find(item => item.id === id);
if (produto && produto.quantidade > 1) {
dispatch(updateQuantidadeAction(id, produto.quantidade - 1))
} else {
dispatch(removeProdutoAction(id))
}
}
function removerProduto (id) {
dispatch(removeProdutoAction(id))
}
return {
dados,
adicionarProduto,
removerProduto,
removerProdutoCarrinho,
valorTotal,
quantidade,
};
};
Já alterei tudo que estava ao alcance do meu conhecimento, mas devo ter passado alguma coisa