React tsx-如何将数组传递到节点

我使用axios从JSON文件中获取一个数组,并且我希望在多个节点/页面上使用相同的数组。

目前我在每一页上都使用这个 var printers = GetPrinters();

我试着打电话 GetPrinters() 从App.tsx并通过路由器将其传递到每个页面,但我似乎无法使其工作。有没有一种方法可以在状态下存储数组并在任何节点上访问它?

我计划再制作4个类似于MonoPrints.tsx的页面,它们都需要访问数组中的数据,它们根本不会更新数组,只是访问它。

我想用最好的方法来做这类事情,目前我一直在为每一页重复调用。

场地结构: 应用.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { TonerLevels } from "./pages/TonerLevels";
import { MonoPrints } from "./pages/MonoPrints";
import { MonoCopies } from "./pages/MonoCopies";
import { ColourPrints } from "./pages/ColourPrints";
import { ColourCopies } from "./pages/ColourCopies";

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/TonerLevels" element={<TonerLevels />}></Route>
        <Route path="/MonoPrints" element={<MonoPrints />}></Route>
        <Route path="/MonoCopies" element={<MonoCopies />}></Route>
        <Route path="/ColourPrints" element={<ColourPrints />}></Route>
        <Route path="/ColourCopies" element={<ColourCopies />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

页码/ 碳粉水平

export function TonerLevels() {
  var printers = GetPrinters();
  return (
    <div>
      <Nav></Nav>
      <table className="table table-dark table-hover">
        <thead>
          <tr>
            <th>Location</th>
            <th>IP</th>
            <th>Name</th>
            <th>Serial</th>
            <th>Black %</th>
            <th>Yellow %</th>
            <th>Magenta %</th>
            <th>Cyan %</th>
            <th>K1 %</th>
            <th>K2 %</th>
            <th>Current Monthly Prints</th>
            <th>Current Monthly Copies</th>
          </tr>
        </thead>
        <tbody className="table-group divider">
          {printers
            ? printers.map((printer) => {
                return (
                  <tr key={printer.address}>
                    <td>{printer.location}</td>
                    <td>
                      <a
                        href={"//" + printer.address}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {printer.address}
                      </a>
                    </td>
                    <td>{printer.name}</td>
                    <td>{printer.serial}</td>
                    <td>{printer.black > -1 ? printer.black : ""}</td>
                    <td>{printer.yellow > -1 ? printer.yellow : ""}</td>
                    <td>{printer.magenta > -1 ? printer.magenta : ""}</td>
                    <td>{printer.cyan > -1 ? printer.cyan : ""}</td>
                    <td>{printer.k1 > -1 ? printer.k1 : ""}</td>
                    <td>{printer.k2 > -1 ? printer.k2 : ""}</td>
                    <td>{getPrints(printer)}</td>
                    <td>{getCopies(printer)}</td>
                  </tr>
                );
              })
            : null}
        </tbody>
      </table>
    </div>
  );
}

服务/ 打印机服务

import axios from "axios";
import { useEffect, useState } from "react";

const PRINTER_REST_API_URL = "http://localhost:8080/GetReport";

export interface Printer {
  address: string;
  black: number;
  monoCopies: number;
  monoPrints: number;
  colourCopies: number;
  colourPrints: number;
  cyan: number;
  k1: number;
  k2: number;
  location: string;
  magenta: number;
  name: string;
  serial: string;
  yellow: number;
  Reports: [
    {
      month: string;
      monoPrints: number;
      monoCopies: number;
      colourPrints: number;
      colourCopies: number;
    }
  ];
}

export function GetPrinters() {
  const [printers, setPrinters] = useState<Printer[] | null>();
  useEffect(() => {
    axios.get(PRINTER_REST_API_URL).then((response) => {
      setPrinters(response.data);
    });
  }, []);
  return printers;
}

编辑: 从serod工作的代码的Typescript:

const Context = createContext<Printer[] | undefined>(undefined);

interface ContextProviderProps {
  children: ReactNode;
}

export const ContextProvider: React.FC<ContextProviderProps> = ({
  children,
}) => {
  const [printers, setPrinters] = useState<Printer[]>();
  useEffect(() => {
    axios.get(PRINTER_REST_API_URL).then((response) => {
      setPrinters(response.data);
    });
  }, []);

  return <Context.Provider value={printers}>{children}</Context.Provider>;
};