未访问的参考：无法访问orderstodisplay＆＃x27;初始化之前 - 尝试更新重新渲染react的值

Question

我正在尝试将文档的标题设置为“/{ordernumber} orders”，对于该ordernumber值，以更新每次用户单击“按钮”和“过滤阵列”的不同数量的订单，则显示屏幕。

对于上下文，我正在导入一个JSON文件，对其进行过滤以显示我想要由用户输入决定的正确元素，然后我正在计算该数组的长度，该数组的长度需要存储在ordernumber变量中以更新文档标题。

我知道我正在登录控制台时访问阵列的正确值，我的问题是如何更新此状态，而无需抛出此错误的情况下，每个渲染都会更改此状态：（无用的ReferageError：无法访问'OrderStoDisplay'在初始化之前）

代码：

import { Col, Row } from "antd";
import { useContext, useEffect, useMemo, useState } from "react";
import Order from "../components/Order";
import { AppContext } from "../context/Context";
import AntButton from "../elements/Button";
import ordersToDisplay from "../orders.json";

const OrdersPage = () => {
    const [filteringStatus, setFilteringStatus] = useState("");
    const {orderAmount, setOrderAmount} = useContext(AppContext)
    const [test, setTest] = useState("")

    const setDiplayAcceptedOrders = () => {
        setFilteringStatus("accepted");
        setTest(ordersToDisplay.length)
    };
    
    const setDiplayCompletedOrders = () => {
        setFilteringStatus("complete");
        setTest(ordersToDisplay.length)
    };
    
    const setDiplayInProgressOrders = () => {
        setFilteringStatus("inProgress");
        setTest(ordersToDisplay.length)
    };


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


    console.log("Orders to display: ", ordersToDisplay);
    console.log("test value: ", test)



    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}>
                    <h3>{filteringStatus == "" ? "All Orders" : filteringStatus}</h3>
                    {ordersToDisplay.map((e) => {
                        return(
                            <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                        )
                    })}
                </Col>
            </Row>
        </div>
    )
}

export default OrdersPage;

App）：

const App = () => {
    const [orderAmount, setOrderAmount] = useState("")

    const Routes = useRoutes([
        {path: "/", element: <HomePage/>},
        {path: `/(${orderAmount})orders`, element: <OrdersPage/>}
    ])
    
  return (
        <AppContext.Provider value={{
            orderAmount, setOrderAmount
        }}>
            <div>
                {Routes}
            </div>
        </AppContext.Provider>
  );
};

export default App;

Answer 1

您正在用试图记忆的内容掩盖导入的OrderStoDisplay。重命名回忆版/变量。您只需要在状态中存储当前filteringstatus状态，test状态似乎是不必要的，并且从我所看到的不使用。

要在上下文中更新OrderAmount状态，请使用useffect挂钩，并依赖于计算/记忆的orders值值要更新OrderAmount值。

例子：

import { Col, Row } from "antd";
import { useContext, useEffect, useMemo, useState } from "react";
import Order from "../components/Order";
import { AppContext } from "../context/Context";
import AntButton from "../elements/Button";
import ordersToDisplay from "../orders.json";

const OrdersPage = () => {
  const [filteringStatus, setFilteringStatus] = useState("");
  const { orderAmount, setOrderAmount } = useContext(AppContext);

  const setDiplayAcceptedOrders = () => {
    setFilteringStatus("accepted");
  };
    
  const setDiplayCompletedOrders = () => {
    setFilteringStatus("complete");
  };
    
  const setDiplayInProgressOrders = () => {
    setFilteringStatus("inProgress");
  };

  // rename to something else, anything but ordersToDisplay
  const orders = useMemo(() => {
    if (filteringStatus) {
      return ordersToDisplay.filter((i) => i.orderStatus === filteringStatus);
    }
    return ordersToDisplay;
  }, [filteringStatus]);

  useEffect(() => {
    console.log("Orders to display: ", orders); // <-- output derived value

    // update amount when orders array updates
    setOrderAmount(orders.length);
  }, [orders, setOrderAmount]);

  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}>
          <h3>{filteringStatus == "" ? "All Orders" : filteringStatus}</h3>
          {orders.map((e) => { // <-- use here
            return (
              <Order
                key={e.id}
                productName={e.productName}
                dateOrdered={e.dateOrdered}
                orderStatus={e.orderStatus}
              />
            )
          })}
        </Col>
      </Row>
    </div>
  );
};

export default OrdersPage;