无法读取未定义的属性“映射”-React 应用程序-useContext 和 useReducer

Question

我正在使用 react 使用 contextHook 和 reducerHook 制作应用程序项目，但得到：TypeError：无法读取未定义的属性“地图”几天前同样的代码还在工作，但现在它给出了那个错误。我已经浪费了很多时间试图在互联网上寻找答案，但我无法获得任何帮助......以下是错误图片和我的代码：Github repo 上的完整代码错误图片 1错误图片 2错误图片 3//App.jsimport 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.jsimport React from 'react';export const Transaction = ({transObj}) => {     return (        <li>            <span>{transObj.description}</span>            <span> {transObj.amount} </span>          </li>    )}//TransactionHistory.jsimport 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.jsimport 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>  );}

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组件中，它期待transObjprop，但它的父级传入transactionprop。所以你也可以修复它：

从“反应”导入反应；

const Transaction = ({ transObj }) => {

  return (

    <li>

      <span>{transObj.description}</span>

      <span> {transObj.amount} </span>

    </li>

  );

};