问题描述
for循环在map函数内部不起作用我在map function add条件中创建了map函数,并希望在每次迭代中更改ID值。为此,我尝试了for循环,但这还行不通。
如何在map函数中使用For Loop?
{items.map((d) => (
<Accordion key={d.ID}
title={
<div>
<tr className="btn-heading">
<td>{d.ID}</td>
<td>{d.Mail}</td>
<td>{d.Name}</td>
<td>{d.PhoneNo}</td>
<td>{d.City}</td>
<td>{d.Date}</td>
<td>{d.Time}</td>
</tr>
</div>
}
content={
<div>
<p className="header">
<span className="header-content">Shipping Address:</span>
292 Naqshband Colony. Near rabbania Mosque. Multan
</p>
<Table size="sm">
<thead>
<tr>
<th>#</th>
<th>Article No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
for (var i = 0; i < d.ID; i++) { <--- for loop does'nt working
{products.map((c) =>
c.ID === 1 ? (
<tr key={c.ID}>
<td>{c.ArticleNo}</td>
<td>{c.ProductName}</td>
<td>{c.Quantity}</td>
<td>{c.Price}</td>
<td>{c.TotalAmount}</td>
</tr>
) : null
)}
}
</tbody>
</Table>
</div>
}
/>
))}
这是我的密码和框:https://codesandbox.io/s/hungry-bardeen-8m2gh?file=/src/App.js
解决方法
...
function App() {
const [items,setItems] = useState([]);
const [products,setProducts] = useState([]);
const renderProducts = (d,products)=> {
const result = []
for (var i = 0; i < d.ID; i++) {
let product = products.map((c) =>
c.ID === 1 ? (
<tr key={c.ID}>
<td>{c.ArticleNo}</td>
<td>{c.ProductName}</td>
<td>{c.Quantity}</td>
<td>{c.Price}</td>
<td>{c.TotalAmount}</td>
</tr>
) : null
)
result.push(product)
}
return result
}
...
return (
<div className="container-fluid">
<section className="heading">
<h4>Products Details</h4>
<input
type="file"
className="input-field"
onChange={(e) => {
const file = e.target.files[0];
readExcel(file);
}}
/>
</section>
{items.map((d) => (
<Accordion
title={
<div>
<tr key={d.ID} className="btn-heading">
<td>{d.ID}</td>
<td>{d.Mail}</td>
<td>{d.Name}</td>
<td>{d.PhoneNo}</td>
<td>{d.City}</td>
<td>{d.Date}</td>
<td>{d.Time}</td>
</tr>
</div>
}
content={
<div>
<p className="header">
<span className="header-content">Shipping Address:</span>
292 Naqshband Colony. Near rabbania Mosque. Multan
</p>
<Table size="sm">
<thead>
<tr>
<th>#</th>
<th>Article No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{renderProducts(d,products)}
</tbody>
</Table>
</div>
}
/>
))}
</div>
);
}
export default App;