reactjs - 我如何在 React 中“循环”？

Question

我目前有

const prices = purchases.map(purchases => <div>{purchases.price}</div>)
const name = purchases.map(purchases=> <div>{purchases.drinkname}</div>)

对于价格和名称列表中的每个元素，我想在反应组件中返回它。

而不是像这样对价格和名称中的每个元素进行硬编码：

return (
<div className ="whitespace-nowrap">{name[0]}</div>
<div className = "flex whitespace-pre">Price: ${prices[0]}</div>
<div className ="whitespace-nowrap">{name[1]}</div>
<div className = "flex whitespace-pre">Price: ${prices[1]}</div>
<div className ="whitespace-nowrap">{name[2]}</div>
<div className = "flex whitespace-pre">Price: ${prices[2]}</div>
etcetc
)

是否可以通过“循环”每个索引来实现这一点？

标签： reactjs

Answer 1

这可能对你有用

{[...Array(prices.length).keys()].map(i => (
  <div className ="whitespace-nowrap">{name[i]}</div>
  <div className = "flex whitespace-pre">Price: {prices[i]}</div>
))}