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

如何解决如何在ReactJS的map函数内部使用For Loop

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;