亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

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

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

慕的地8271018 2023-03-10 13:58:36
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
查看完整描述

1 回答

?
小怪獸愛吃肉

TA貢獻1852條經驗 獲得超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;


查看完整回答
反對 回復 2023-03-10
  • 1 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號