TypeError：无法读取未定义的属性“地图”-React 应用程序-useContext 和 useReducer 问题

Question

我正在使用 react 使用 contextHook 和 reducerHook 制作应用项目，但得到：

TypeError: 无法读取未定义的属性“地图”

几天前同样的代码还在工作，但现在它给出了这个错误。我已经浪费了很多时间试图在互联网上寻找答案，但我无法获得任何帮助......这是错误的图片和我的代码：

Complete code on Github repo

Error Pic 1

Error Pic 2

Error Pic 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 属性，但它的父级传入transaction 属性。所以你也可以修复它：

从“反应”导入反应；

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