第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 ReactJS 的 map 函數(shù)中使用 For Loop

如何在 ReactJS 的 map 函數(shù)中使用 For Loop

慕的地8271018 2023-03-10 13:58:36
for 循環(huán)在 map 函數(shù)中不起作用我在 map 函數(shù)中創(chuàng)建 map 函數(shù)添加 if 條件并希望在每次迭代中更改 ID 值。為此,我嘗試了 for 循環(huán),但這還沒有用。如何在 map 函數(shù)中使用 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
查看完整描述

1 回答

?
小怪獸愛吃肉

TA貢獻(xiàn)1852條經(jīng)驗 獲得超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;


查看完整回答
反對 回復(fù) 2023-03-10
  • 1 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號