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

Question

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

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

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

Github repo 上的完整代码

错误图片 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>

  );

}

Answer 1

对于TransactionHistory组件：默认上下文值是一个数组，但您可以像对象一样对其进行解构。在映射函数中，您将原始数组作为道具而不是元素传递。这是一个更新的版本：function TransactionHistory() {&nbsp; const transactions = useContext(TransactionContext);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <h2> History </h2>&nbsp; &nbsp; &nbsp; <hr />&nbsp; &nbsp; &nbsp; <ul className="transaction-list">&nbsp; &nbsp; &nbsp; &nbsp; {transactions.map((transObj, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Transaction key={index} transaction={transObj} />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; );}然后，在Transaction组件中，它期待transObjprop，但它的父级传入transactionprop。所以你也可以修复它：从“反应”导入反应；const Transaction = ({ transObj }) => {&nbsp; return (&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <span>{transObj.description}</span>&nbsp; &nbsp; &nbsp; <span> {transObj.amount} </span>&nbsp; &nbsp; </li>&nbsp; );};