实际上,我使用的代码与现有文件中的代码完全相同,而我试图使用map显示的数据只显示了其中的一部分。我试图显示一个数据表,但只显示了表头。我知道我的数据库调用不是问题所在,因为我可以看到状态组件“purchases”中的数据。
var navigate = useNavigate();
// refundable purchases
const [purchases, setPurchases] = useState([]);
// current balance
const [balance, setBalance] = useState(0);
const Purchase = (props) => {
// on click open interactive pop up confirming refund
<tr>
<td className='table-data'>{props.purchase.title}</td>
<td className='table-data'>{numberFormat(props.purchase.amount)}</td>
</tr>
};
useEffect(()=> {
async function fetchData(){
const purchaseResponse = await fetch(`http://localhost:4000/refund/`);
if (!purchaseResponse.ok){
window.alert(`An error occured: ${purchaseResponse.statusText}.`)
return;
}
const data = await purchaseResponse.json();
setPurchases(data);
}
fetchData();
return;
},[purchases.length]);
function makeTable(){
return purchases.map((element)=> {
console.log(element);
return (
<Purchase
purchase={element}
key = {element._id}
/>
);
});
}
return (
// Will Display
<section>
<div className='home'>
{/* Title */}
<h1 className='hometitle'>
Claim A Refund
</h1>
{/* Table of Clickable elements showing possilbe purchase refunds*/}
<div>
<table className='table' style={{marginTop:20}}>
<thead className='table-data'>
<tr>
<th className='table-header'>Title</th>
<th className='table-header'>Amount</th>
</tr>
</thead>
<tbody>{makeTable()}</tbody>
</table>
</div>
{/* On selection of specific purchase :
-> double check with user
-> diplay alert box containing "Refund for <transaction title> made" */}
</div>
</section>
);
我一直盯着这个像一个疯子,不知道为什么它不显示。
2条答案
按热度按时间ebdffaop1#
如果您没有看到控制台输出,这意味着您的数据没有加载之前,渲染的.map也许您可以尝试这样等待数据。
也是断章取义,但对于useEffect,你不需要写“purchases.length”,只写“purchases”就足够了。
7lrncoxx2#
将
<tbody>{makeTable()}</tbody>
改为{purchases.length > 0 && <tbody>{makeTable()}</tbody>}