为什么我得到 Typeerror cannot read 属性 map of undefined，尽管我的事务状态对象正在动态更新？

Question

添加交易按钮未在交易历史容器中呈现交易列表这段代码 {transaction && transaction.map(trans).... 正在呈现应用程序 UI 但添加交易按钮未在交易历史容器中动态生成交易组件}

 import React from 'react';

const AddTransaction = 
({item,amount,setItem,setAmount,transaction,setTransaction}) 
=> {


const onSubmit = (e) => {
e.preventDefault();
setTransaction([...transaction,
                
    {
        text: item,
        amount: amount,
        id: Math.floor(Math.random()*1000),
    }

    ] );

setItem('');
setAmount('');
}

return (
    <div   className='addtransaction-container'>
  
    <div className='add-trans-header'>

        <h4>Add New Transaction</h4>

    </div>

    <form>

    <div className="form-control">

    <label htmlFor="text">Text</label>

    <input type="text" value={item} 
    onChange={(e) => setItem(e.target.value)} 
    placeholder="Enter text..." />

    </div>

    <div className="form-control">

    <label htmlFor="amount"

    >Amount <br />

    (negative - expense, positive - income)
    
    </label>

    <input type="number" value={amount} 
    onChange={(e) => setAmount(e.target.value)} 
    placeholder="Enter amount..." />

    </div>

    <button type='button' onClick={onSubmit} 
            value='submit'
            className="btn">
            Add transaction
    </button>

    </form>

    </div>
    );
  }

  export default AddTransaction;

地图函数未渲染 Transaction TransactionList.js 文件中的组件

  import React from 'react'
  import './App.css';
  import Transaction from './Transaction.js';

  const TransactionList = ({text,transaction,amount}) => {


  return (


  <div className='transactionlist-container'>

    <div className='transactionlist-header-container'>

    <h4>

     Transaction History

    </h4>
    
    </div>

    <ul>
           <li>
    
            { transaction.map(trans => 
            
               <Transaction
                amount={transaction.amount}
                text={transaction.text}
                key={transaction.id} />

            )}
        </li>

        </ul>

    
    
    
      </div>
      )
      }

     export default TransactionList;

我的 Transaction.js 文件有一个包含输入文本和数量的 ul 列表，但该组件未在应用程序中呈现 UI。

import React from 'react'

const Transaction = ({transaction,text,amount}) => {
return (
    <div className='transaction'>
        {text}<span>{amount}</span>
    </div>
    )
 }

 export default Transaction;

Answer 1

我已经重新创建了该应用程序，它可以正常运行。

这是工作演示的link：StackBlitz

import React, { useState, useEffect } from "react";
import TransactionList from "./TransactionList";
import AddTransaction from "./AddTransaction";

const App = () => {
  const [transaction, setTransaction] = useState([]);

  const handleTransaction = value => {
    setTransaction([...transaction, value]);
  };
  const expenseList = transaction.filter(trans => Number(trans.amount) < 0);
  const expense = expenseList.reduce(
    (acc, curr) => acc + Number(curr.amount),
    0
  );

  const amountList = transaction.filter(trans => Number(trans.amount) > 0);
  const amount = amountList.reduce((acc, curr) => acc + Number(curr.amount), 0);

  useEffect(() => {
    console.log("From app:", transaction);
  }, [transaction]);

  return (
    <div className="transactionlist-container">
      <div>
        <span>income: {JSON.stringify(amount)}</span>{" "}
        <span> total expense: {JSON.stringify(expense)}</span>
        <span> balance: {amount + expense}</span>
      </div>
      <TransactionList transaction={transaction} />
      <AddTransaction
        transaction={transaction}
        handleTransaction={handleTransaction}
      />
    </div>
  );
};

export default App;

import React from "react";
import Transaction from "./Transaction";

const TransactionList = ({ transaction }) => {
  console.log("from tl:", transaction);
  return (
    <div className="transactionlist-container">
      <div className="transactionlist-header-container">
        <h4>Transaction History</h4>
      </div>

      {transaction.map(trans => (
        <Transaction amount={trans.amount} text={trans.text} key={trans.id} />
      ))}
    </div>
  );
};

export default TransactionList;

import React from "react";

const Transaction = ({ text, amount }) => {
  return (
    <div className="transaction">
      {text}
      <span>{amount}</span>
    </div>
  );
};

export default Transaction;

import React,{useState} from "react"
const AddTransaction = 
({handleTransaction}) 
=> {
  const [item,setItem] = useState("")
  const [amount, setAmount] = useState(0)
const onSubmit = (e) => {
e.preventDefault();
handleTransaction(     
    {
        text: item,
        amount: amount,
        id: Math.floor(Math.random()*1000),
    }

   );

setItem('');
setAmount('');
}

return (
     <div
        className="inputBox"
      >
  
    <div className='add-trans-header'>

        <h4>Add New Transaction</h4>

    </div>

    <form>

    <div className="form-control">

    <label htmlFor="text">Text</label>

    <input type="text" value={item} 
    onChange={(e) => setItem(e.target.value)} 
    placeholder="Enter text..." />

    </div>

    <div className="form-control">

    <label htmlFor="amount"

    >Amount <br />

    (negative - expense, positive - income)
    
    </label>

    <input type="number" value={amount} 
    onChange={(e) => setAmount(e.target.value)} 
    placeholder="Enter amount..." />

    </div>

    <button type='button' onClick={onSubmit} 
            value='submit'
            className="btn">
            Add transaction
    </button>

    </form>

    </div>
    );
  }

  export default AddTransaction;

为什么我得到 Typeerror cannot read 属性 map of undefined，尽管我的事务状态对象正在动态更新？

Why I am getting the Typerror cannot read property map of undefined, despite the my transaction state object is updating dynamically?

typeerror

reactjs

map-function