反應具有多個值的映射物件

我想獲取 stage_id="1" , "2" ,"3" 的物件，如何在同一個 map 函式中添加 2 和 3 。

    {orders.map((e) => {
        return (
          <>
            <div className={`container bg-${bg}`}>
              <div className="row">
                <div className="col-sm-6">
                  {e.stage_id ==="1" ? (
                    <div className="card my-2">
                      <div className="card-body">
                        <h5 className="card-title">Order No.#{e.id}</h5>
                        <p className="card-text">
                          Total Price = {e.total_price} <br /> Stage Id ={" "}
                          {e.stage_id} <br /> Payment Status Id ={" "}
                          {e.payment_status_id} <br />
                          Created Date = {new Date(e.createdAt).toGMTString()}
                        </p>
                      </div>
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          </>
        );
      })}

uj5u.com熱心網友回復：

我不知道您是否只想知道如何渲染地圖中的所有訂單，或者如何僅渲染訂單 1、2 和 3，或者其他什么？

如果您想渲染所有專案，那么您可以這樣做：（請注意，我已經洗掉了外部片段，<></>因為您不需要它，并key={order.id}根據需要添加以告訴 React 如何在以下情況下唯一標識串列中的所有專案你渲染它們 - 見這里）。

{orders.map((order) => (
  <div key={order.id} className={`container bg-${bg}`}>
    <div className="row">
      <div className="col-sm-6">
        <div className="card my-2">
          <div className="card-body">
            <h5 className="card-title">Order No.#{order.id}</h5>
            <p className="card-text">
              Total Price = {order.total_price} <br /> Stage Id ={" "}
              {order.stage_id} <br /> Payment Status Id ={" "}
              {order.payment_status_id} <br />
              Created Date = {new Date(order.createdAt).toGMTString()}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
))}

如果您只想渲染訂單 1、2 和 3，那么您可以這樣做：

{orders
  .filter((order) => ["1", "2", "3"].includes(order.stage_id))
  .map((order) => (
    <div key={order.id} className={`container bg-${bg}`}>
      <div className="row">
        <div className="col-sm-6">
          <div className="card my-2">
            <div className="card-body">
              <h5 className="card-title">Order No.#{order.id}</h5>
              <p className="card-text">
                Total Price = {order.total_price} <br /> Stage Id ={" "}
                {order.stage_id} <br /> Payment Status Id ={" "}
                {order.payment_status_id} <br />
                Created Date = {new Date(order.createdAt).toGMTString()}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  ))}

...或者如果有很多訂單并且您想避免對所有訂單進行兩次迭代，請執行以下操作：

{orders.map((order) => {
  if (!["1", "2", "3"].includes(order.stage_id)) {
    return null;
  }
  return (
    <div key={order.id} className={`container bg-${bg}`}>
      <div className="row">
        <div className="col-sm-6">
          <div className="card my-2">
            <div className="card-body">
              <h5 className="card-title">Order No.#{order.id}</h5>
              <p className="card-text">
                Total Price = {order.total_price} <br /> Stage Id ={" "}
                {order.stage_id} <br /> Payment Status Id ={" "}
                {order.payment_status_id} <br />
                Created Date = {new Date(order.createdAt).toGMTString()}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
})}

..或者如果您有其他要求，請告訴我們，我們會盡力提供幫助！

標籤：javascript 反应 字典

上一篇：可以通過另一個組件中的onClick偵聽器呼叫ReactJS類嗎？

下一篇：如何在ES6/React中將小寫和下劃線轉換為正確的大小寫和空格