不显示来自.map() React的项

Question

我实际上使用了与现有文件相同的确切代码，我试图使用地图显示的数据只显示了其中的1部分。我试图显示数据表，但只有标题出现。我知道我的数据库调用不是问题，因为我可以看到我的状态组件"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>
);

我一直像疯子一样盯着这个，不明白为什么它不显示。

Answer 1

change<tbody>{makeTable()}</tbody>用{purchases.length > 0 && <tbody>{makeTable()}</tbody>}代替

Answer 2

如果你没有看到控制台输出，这意味着你的数据没有在渲染。map之前加载，也许你可以尝试等待数据

function makeTable() {
return (
Object.keys(purchases || [])?.length > 0 &&
Object.entries(purchases).map((element) => {
console.log(element);
return <Purchase purchase={element} key={element._id} />;
})
);
}

也是脱离上下文，但是对于useEffect，你不需要写" purchasing .length"。只有"purchases"就够了。