[Bug] Cannot read properties of undefined (reading 'id') | React: gerencie estados globalmente com Context API

Após modificar a função adicionarProduto (04:30 de aula) se eu clico mais de uma vez em "adicionar ao carrinho" a página apaga e o console retorna a seguinte mensagem várias vezes:

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at index.jsx:16:54
    at Array.map (<anonymous>)
    at ListaProdutosCarrinho (index.jsx:14:21)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
(anonymous) @ index.jsx:16
ListaProdutosCarrinho @ index.jsx:14
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Mostrar mais 13 quadros
Mostrar menos

E essa também:

The above error occurred in the <ListaProdutosCarrinho> component:

    at ListaProdutosCarrinho (http://localhost:5173/src/components/ListaProdutosCarrinho/index.jsx:23:3)
    at div
    at div
    at CarrinhoSuspenso (http://localhost:5173/src/components/CarrinhoSuspenso/index.jsx:27:7)
    at Home
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b27c883c:3403:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b27c883c:3786:5)
    at CarrinhoProvider (http://localhost:5173/src/context/CarrinhoContext.jsx:21:3)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b27c883c:3733:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b27c883c:4381:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Não sei o que está acontecendo.

Meu projet está em https://github.com/RenanSantos7/react-context-api

Essa mensagem de erro "Cannot read properties of undefined (reading 'id')" geralmente aparece quando você tá tentando acessar uma propriedade de um objeto que não foi definido. No seu caso, parece que tá rolando isso no arquivo index.jsx na linha 16.

Primeiro, dá uma conferida se o objeto ou array que você tá tentando acessar o 'id' realmente existe e tá sendo passado corretamente pro componente ListaProdutosCarrinho.

Você mencionou que fez alguma alteração nessa função, certo? Pode ser que, ao adicionar um produto, alguma lógica não esteja retornando os dados como você espera.

Você disse que ao clicar mais de uma vez em "adicionar ao carrinho" a página apaga, né? Talvez tenha algo nessa função ou no estado que tá bagunçando tudo.

A mensagem de erro diz que o problema tá ali. Então, foca nesse componente e verifica onde exatamente tá rolando esse erro. Dá uma olhada na linha 23 do index.jsx desse componente e vê se consegue identificar o que tá causando esse erro.

A dica de colocar um "error boundary" pode ser útil. Isso é como uma rede de segurança que captura erros em componentes e te dá mais controle sobre como lidar com eles. Dá uma olhada no link que te passaram pra entender melhor.