Kait khusus tidak mengambil data seperti yang diharapkan

Ini adalah tindak lanjut dari postingan terkait dengan kode umum yang sama. Saya telah membuat kait khusus useLUGet yang dimaksudkan hanya sebagai pembungkus beberapa panggilan pengambilan/axios. Saya mengikuti (kebanyakan) repo ini, yang berfungsi dengan baik oleh sendiri karena App.js di sana memicu panggilan melalui peristiwa onSubmit. Dalam kasus saya, saya hanya ingin memuat daftar drop-down ketika halaman dimuat. Kait khusus tampaknya tidak aktif dan saya tidak yakin bagaimana melakukannya tanpa memberinya useEffect(()=>{...}, []) dengan larik kosong, dan itu melanggar aturan kait ajaib. Saya telah mengonfirmasi bahwa titik akhir API sedang berjalan dan membuahkan hasil. Satu-satunya peringatan dalam kode saya terkait dengan deklarasi yang tidak digunakan.

Inilah isi kode saya (diperbarui sedikit sejak posting terkait saya yang lain).

Aplikasi.js:

import React from "react";
//import logo from "./logo.svg";
import "./App.css";
//import SearchForm from "./searchForm";
import AssetTypes from "./controls/AssetTypes";
import { GlobalProvider } from "./context/GlobalState";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      Home
      <AssetTypes></AssetTypes>
      {/* <GlobalProvider>
        <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/assetTypes" component={AssetTypes} />
          </Switch>
        </Router>
      </GlobalProvider> */}
    </div>
  );
}

export default App;

Tipe Aset.js

import React from "react";
import { NativeSelect } from "@material-ui/core";

import { useLUGet } from "../services/Http";

function AssetTypes() {
  let path = `/AssetTypes?organizationId=999`;
  console.log("path: " & path);

  console.log("before useLUGet");
  const { status, data, error } = useLUGet(path);  // ***THIS IS THE STICKING POINT***
  console.log(JSON.stringify(data));
  console.log("after useLUGet");

  return (
    <>
      <h1>Asset Types</h1>

      <NativeSelect>
        <option>stuff</option>
        {data &&
          data.map((item) => (
            <option value={item.assetTypeId}>
              {item.assetCategory} - {item.assetTypeName}
            </option>
          ))}
      </NativeSelect>
    </>
  );
}

export default AssetTypes;

Http.js

import { useEffect, useRef, useReducer } from "react";

const API_URL_BASE = "https://localhost:5001/api";

// Example usage:
// {status === 'idle' && (<div> Let's get started by searching for an article! </div>)}
// {status === 'error' && <div>{error}</div>}
// {status === 'fetching' && <div className="loading"></div>}
// {status === 'fetched' && (<>Do something with {data} object</>)

export const useLUGet = (path) => {
  console.log("in useLUGet");
  console.log("path: " & path);
  console.log("API_URL_BASE: " & API_URL_BASE);
  // const cache = useRef({});

  const url =
    API_URL_BASE &
    "/" &
    (path && path.substring(0, 1) === "/" ? path.substring(1) : path);

  console.log("url: " & url);

  const initialState = {
    status: "idle",
    error: null,
    data: [],
  };

  console.log("initial state: *** " & JSON.stringify(initialState));

  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case "FETCHING":
        return { ...initialState, status: "fetching" };
      case "FETCHED":
        return { ...initialState, status: "fetched", data: action.payload };
      case "FETCH_ERROR":
        return { ...initialState, status: "error", error: action.payload };
      default:
        return state;
    }
  }, initialState);

  useEffect(() => {
    let cancelRequest = false;
    console.log("url: " & url);
    if (!url) return;

    const fetchData = async () => {
      dispatch({ type: "FETCHING" });
      //if (cache.current[url]) {
      //  const data = cache.current[url];
      //  dispatch({ type: "FETCHED", payload: data });
      //} else {
      try {
        const response = await fetch(url);
        const data = await response.json();
        //cache.current[url] = data;
        if (cancelRequest) return;
        dispatch({ type: "FETCHED", payload: data });
      } catch (error) {
        if (cancelRequest) return;
        dispatch({ type: "FETCH_ERROR", payload: error.message });
      }
      //}
    };

    fetchData();

    return function cleanup() {
      cancelRequest = true;
    };
  }, [url, path]);

  return state;
};

Keluaran konsol:

[HMR] Waiting for update signal from WDS...
AssetTypes.js:8 0
AssetTypes.js:10 before useLUGet
Http.js:12 in useLUGet
Http.js:13 0
Http.js:14 0
Http.js:22 0
Http.js:30 0
AssetTypes.js:13 []
AssetTypes.js:14 after useLUGet
AssetTypes.js:8 0
AssetTypes.js:10 before useLUGet
Http.js:12 in useLUGet
Http.js:13 0
Http.js:14 0
Http.js:22 0
Http.js:30 0
AssetTypes.js:13 []
AssetTypes.js:14 after useLUGet
Http.js:47 0