如何在 ReactJS 的 map 函数中使用 For Loop

Question

for 循环在 map 函数中不起作用我在 map 函数中创建 map 函数添加 if 条件并希望在每次迭代中更改 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

Answer 1

...function App() {&nbsp; const [items, setItems] = useState([]);&nbsp; const [products, setProducts] = useState([]);&nbsp; const renderProducts = (d, products)=> {&nbsp; &nbsp; const result = []&nbsp; &nbsp; for (var i = 0; i < d.ID; i++) {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; let product = products.map((c) =>&nbsp; &nbsp; &nbsp; &nbsp; c.ID === 1 ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr key={c.ID}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{c.ArticleNo}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{c.ProductName}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{c.Quantity}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{c.Price}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{c.TotalAmount}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; ) : null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; result.push(product)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; return result&nbsp; }&nbsp; ...&nbsp;&nbsp; return (&nbsp; &nbsp; <div className="container-fluid">&nbsp; &nbsp; &nbsp; <section className="heading">&nbsp; &nbsp; &nbsp; &nbsp; <h4>Products Details</h4>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="input-field"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const file = e.target.files[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; readExcel(file);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; {items.map((d) => (&nbsp; &nbsp; &nbsp; &nbsp; <Accordion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr key={d.ID} className="btn-heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.ID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.Mail}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.Name}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.PhoneNo}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.City}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.Date}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{d.Time}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className="header-content">Shipping Address:</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 292 Naqshband Colony. Near rabbania Mosque. Multan&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Table size="sm">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>#</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Article No</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Product Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Quantity</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Total Amount</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {renderProducts(d, products)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}export default App;