Reactjs 为什么我得到的TypeError无法读取未定义的属性映射，尽管我的事务状态对象正在动态更新？

“添加事务”按钮未在事务历史记录容器中呈现事务列表 这段代码

{transaction&&transaction.map（trans）…

正在呈现应用程序UI，但添加事务按钮没有在事务历史容器中动态生成事务组件}

我的

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;

从“React”导入React
常量事务=（{Transaction，text，amount}）=>{
返回(
{text}{amount}
)
}
出口违约交易；

我重新创建了这个应用程序，它可以正常工作，没有任何问题

以下是工作演示的链接：

import React，{useState，useffect}来自“React”；
从“/TransactionList”导入TransactionList；
从“/AddTransaction”导入AddTransaction；
常量应用=（）=>{
const[transaction，setTransaction]=useState（[]）；
const handleTransaction=值=>{
setTransaction（[…事务，值]）；
};
const expenseList=transaction.filter（trans=>Number（trans.amount）<0）；
const expense=expenseList.reduce(
（会计科目，当前）=>会计科目+数字（当前金额），
0
);
const amountList=transaction.filter（trans=>Number（trans.amount）>0）；
const amount=amountList.reduce（（acc，curr）=>acc+Number（curr.amount），0）；
useffect（（）=>{
console.log（“来自应用：”，事务）；
}，[交易]；
返回(
收入：{JSON.stringify（金额）}{”“}
总费用：{JSON.stringify（费用）}
余额：{金额+费用}
);
};
导出默认应用程序；

从“React”导入React；
从“/Transaction”导入事务；
常量TransactionList=（{transaction}）=>{
日志（“来自tl:”，事务）；
返回(
交易历史
{transaction.map（trans=>(
))}
);
};
导出默认事务列表；

从“React”导入React；
常量事务=（{text，amount}）=>{
返回(
{text}
{amount}
);
};
出口违约交易；

import React，{useState}来自“React”
const AddTransaction=
（{handleTransaction}）
=> {
const[item，setItem]=useState（“”）
const[amount，setAmount]=useState（0）
const onSubmit=（e）=>{
e、 预防默认值（）；
手交易（
{
案文：项目，
金额:金额,，
id:Math.floor（Math.random（）*1000），
}
);
设置项（“”）；
设定金额（“”）；
}
返回(
添加新事务
正文
setItem（e.target.value）}
占位符=“输入文本…”/>
金额

（负-费用，正-收入）
setAmount（e.target.value）}
占位符=“输入金额…”/>
添加事务
);
}
导出默认AddTransaction；

您已经向我们展示了您在哪里更新事务状态，但您能否向我们展示您首先在哪里创建它？App.js const[transaction，setTransaction]=useState（[]）；感谢您的努力……但我想知道我的代码有什么问题，为什么它没有在UI中呈现列表？检查

TransactionList

的代码，您错误地传递了文本和金额。此外，所提供的CodeSandbox链接缺少一些代码，因为我必须自己创建整个应用程序。是的，但我试图在没有contextApi的情况下构建它

  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;

import React from 'react'

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

 export default Transaction;

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;