TypeError: не удается прочитать карту свойства undefined - приложение React - проблема useContext и useReducer

Question

Я использую реакцию для создания проекта приложения с помощью contextHook и reducerHook, но получаю:

TypeError: невозможно прочитать карту свойства undefined.

Тот же код работал несколько дней назад, но теперь выдает ошибку. Я потратил столько часов, пытаясь найти ответы в Интернете, но не смог получить никакой помощи... Вот изображения ошибки и мой код:

Полный код в репозитории Github

Ошибка Рис 1

Ошибка Рис 2

Ошибка Рис 3

//App.js

import React from 'react';

import './App.css';

import Header from './Header';
import Balance from './Balance';
import AccSummary from './AccSummary';
import TransactionHistory from './Transactionhistory';
import AddTransaction from './AddTransaction';


function App() {
  return (
    <div className='container'>
      <Header />
      <Balance />
      <AccSummary />
      <TransactionHistory />
      <AddTransaction />
      </div>
      
  );
}

export default App;


//Transaction.js

import React from 'react';

export const Transaction = ({transObj}) => { 
    return (
        <li>
            <span>{transObj.description}</span>
            <span> {transObj.amount} </span>
          </li>
    )
}

//TransactionHistory.js

import React, { useContext } from 'react';
import { TransactionContext } from './TransContext';
import { Transaction } from './Transaction';

function TransactionHistory() {
  

  let  {transactions}  = useContext(TransactionContext);
  return (
    <div>
      <h2> History </h2>
      <hr />
      <ul className='transaction-list'>
        {transactions.map(transObj => (
          <Transaction key={transactions.id} transactions = {transactions} />
        ))}
        
//Add Transaction.js

import React from 'react';

function AddTransaction() {
  return (
    <div>

    <h2 className='AddTrans'> <br /> Add New Transaction</h2>
    <hr />
    <form className = 'transaction-form'>
      <label>
        Enter Description <br />
        <input type='text'
        placeholder='Enter Detail of Transaction' className='color'/> <br />
      </label>

      <label>
        Enter Amount <br />
        <input type='Number'
        placeholder='Enter Transaction Amount'/>
      </label>
      <br />
      <input className='button' type="submit" value="Add Transaction"/>

    </form>
    </div>
  );
}

export default AddTransaction;


//TransContezt.js

import { createContext } from "react";

const initialTransaction = [
    {amount: 500, description: 'Cash'},
    {amount: -200, description: 'Bill'}
]

export const TransactionContext = createContext(initialTransaction);

//App.css

.container {
  width: 350px;
  min-height: 700px;
  margin: 0 auto ;
  background-color:white;
  
  box-shadow: 0 0 10px gray;
  margin-top: 50px;
  padding: 10px 50px;
  font-family: "Times New Roman", Times, serif;
  background-image: url("1.png"), url("2.png"), url("3.png"), url("4.png");
  background-position: left top, left top, left top, left top ;
  background-repeat: repeat-x;
  background-size: 100% 20%, 100% 55%, 100% 75%, 100% 100%;
  
}

.text-centre{
  text-align: center;
  justify-content: space-between;
  
  background-color: #98DBC6;
  border-radius: 5px;
  display: grid;
  justify-content: space-around;
  
  
}

.accsumm{
  display: flex;
  justify-content: space-around ;
  background-color: #5BC8AC;
  box-shadow:  0 0 10px gray;
  border: thin;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;

}

.AddTrans{
  margin: 10px 0 0;

}

.transaction-form input{
  width: 97%;
  margin: 10px 0;
  
  padding: 15px 5px;
  border-radius: 5px;
  
  color: white;
}

.color{
  color: white;
}

.transaction-list{
  margin: 0;
  padding: 0; 
  
}
.transaction-list > li{
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 10px gray;
  padding: 10px 5px;
  background-color: honeydew;
  margin: 5px 0;
  border-radius: 5px;
}

.button {
  
  width: 100%;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 0 10px gray;
  padding: 10px 10px;
  background-color: rgb(138, 179, 255);
  margin: 10px 0;
  border-radius: 5px;
  font-size: larger;
  font-weight: bolder;
  align-self: center;
}

Tr

Answer 1

Для TransactionHistory составная часть:

1. Значение контекста по умолчанию - это массив, но вы деструктурируете его как объект.
2. В функции сопоставления вы передаете исходный массив как опору вместо элемента.

Вот обновленная версия:

function TransactionHistory() {
  const transactions = useContext(TransactionContext);
  return (
    <div>
      <h2> History </h2>
      <hr />
      <ul className="transaction-list">
        {transactions.map((transObj, index) => (
          <Transaction key={index} transaction={transObj} />
        ))}
      </ul>
    </div>
  );
}

Затем в Transaction компонент, он ожидает transObj prop, но его родитель проходит transactionопора Так что вы тоже можете это исправить:

импортировать React из "react";

const Transaction = ({ transObj }) => {
  return (
    <li>
      <span>{transObj.description}</span>
      <span> {transObj.amount} </span>
    </li>
  );
};