类型错误：无法读取未定义的属性'map' - 反应应用程序 - 使用上下文和使用Reducer问题

Question

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

类型错误： 无法读取未定义的属性"映射">

几天前相同的代码正在工作，但现在它给出了该错误。我浪费了很多时间试图在互联网上找到答案，但我无法得到任何帮助......以下是错误和我的代码的图片：

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. 在映射函数中，您将原始数组作为 prop 而不是元素传递。

这是一个更新的版本：

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>
);
};