我怎樣才能用更少的代碼更有效地完成這項作業？-映射Json并有條件地渲染組件

我正在構建一個非常簡單的應用程式，僅根據用戶輸入從 json 串列中呈現不同的訂單。

這很容易完成，但我不確定如何讓這段代碼更高效，我實際上希望用更少的代碼獲得相同的輸出。

關于我可能在不需要的地方重復自己的代碼以及我可以采取的不同方法的任何建議。

import { Col, Row } from "antd";
import { useState } from "react";
import Order from "../components/Order";
import AntButton from "../elements/Button";
import Json from "../orders.json";

const completedOrders = Json.filter(function(i) {
    return i.orderStatus === "complete"
});

const acceptedOrders = Json.filter(function(i) {
    return i.orderStatus === "accepted";
});

const inProgressOrders = Json.filter(function(i) {
    return i.orderStatus === "inProgress";
});


const OrdersPage = () => {

    const [userInput, setUserInput] = useState("default")
    const [display, setDisplay] = useState("")

    const setDiplayAcceptedOrders = () => {
        console.log("clicked accepted")
        setDisplay("acceptedOrders")
    }

    const setDiplayCompletedOrders = () => {
        console.log("clicked completed")
        setDisplay("completedOrders")
    }

    const setDiplayInProgressOrders = () => {
        console.log("clicked inProgress")

        setDisplay("inProgressOrders")
    }
    const AllOrdersOutput = () => {
        return(
            <>
                {Json.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }

    const CompletedOrdersOutput = () => {
        return(
            <>
                {completedOrders.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }
    const AcceptedOrdersOutput = () => {
        return(
            <>
                {acceptedOrders.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }
    const InProgressOrdersOutput = () => {
        return(
            <>
                {inProgressOrders.map((e) => {
                    return(
                        <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                    )
                })}
            </>
        )
    }

    const DisplayFunction = () => {
        if(display === "acceptedOrders"){
            return(<AcceptedOrdersOutput/>)
        } else if(display === "completedOrders"){
            return(<CompletedOrdersOutput/>)
        } else if(display === "inProgressOrders"){
            return(<InProgressOrdersOutput/>)
        } else {
            return(<AllOrdersOutput/>)
        }
    }

    return(
        <div className="container">
            <Row   justify="space-between" align="middle">
                <Col span={6}>
                    <h1>Orders</h1>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayAcceptedOrders} name="Accepted"/>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayInProgressOrders}  name="In Progress"/>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayCompletedOrders} name="Complete"/>
                </Col>
            </Row>
            <Row>
                <Col span={12}>
                    {DisplayFunction()}
                </Col>
            </Row>
        </div>
    )
}

export default OrdersPage;

uj5u.com熱心網友回復：

無需單獨存盤每個串列，您可以只存盤過濾條件并在條件更改時使用它來動態過濾訂單串列（當用戶單擊任何按鈕以顯示特定訂單時）。

例如，您可以這樣做：

  const [filteringStatus, setFilteringStatus] = useState("");

  const setDiplayAcceptedOrders = () => {
    setFilteringStatus("accepted");
  };

  const setDiplayCompletedOrders = () => {
    setFilteringStatus("complete");
  };

  const setDiplayInProgressOrders = () => {
    setFilteringStatus("inProgress");
  };

  const ordersToDisplay = useMemo(() => {
    if (filteringStatus) {
      return Json.filter((i) => i.orderStatus === filteringStatus);
    }
    return Json; // retrun all orders
  }, [filteringStatus]);

  return (
    <div className="container">
      <div justify="space-between" align="middle">
        <div span={6}>
          <h1>Orders</h1>
        </div>
        <div span={6}>
          <button onClick={setDiplayAcceptedOrders} name="Accepted" />
        </div>
        <div span={6}>
          <button onClick={setDiplayInProgressOrders} name="In Progress" />
        </div>
        <div span={6}>
          <button onClick={setDiplayCompletedOrders} name="Complete" />
        </div>
      </div>
      <div>
        <div span={12}>{ordersToDisplay}</div>
      </div>
    </div>
  );

useCallback如果您希望額外優化您的代碼，您也可以將這些過濾功能包裝在其中。

標籤：反应 json if 语句 条件语句 array.prototype.map

上一篇：有人可以幫我解釋這個javascript代碼中的if陳述句嗎？

下一篇：在python中使用np.where基于if-elif-else條件創建新列