1 回答

TA貢獻1780條經(jīng)驗 獲得超5個贊
對于TransactionHistory
組件:
默認(rèn)上下文值是一個數(shù)組,但您可以像對象一樣對其進行解構(gòu)。
在映射函數(shù)中,您將原始數(shù)組作為道具而不是元素傳遞。
這是一個更新的版本:
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。所以你也可以修復(fù)它:
從“反應(yīng)”導(dǎo)入反應(yīng);
const Transaction = ({ transObj }) => {
return (
<li>
<span>{transObj.description}</span>
<span> {transObj.amount} </span>
</li>
);
};
添加回答
舉報