如何在 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() {

  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;