Question

我创建了一个自定义钩子useLUGet，该钩子只是用作一些axios调用的包装。我遵循了（主要是）this repo，它本身可以正常工作，因为那里的App.js通过onSubmit事件触发了调用。就我而言，我只想在页面加载时加载一个下拉列表。通常，我会使用带有空数组的<Thumbnail>来执行此操作，因此它只触发一个，但是我得到的是可怕的“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。”记录到控制台的最后一条真实消息是“ inuseLUGet”，但是我也不理解一些控制台日志值“ 0”。

这是我代码的胆量。

App.js：

useEffect(()=>{...}, [])

AssetTypes.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
      <GlobalProvider>
        <Router>
          <Switch>
            {/* <Route exact path="/" component={Home} /> */}
            <Route path="/assetTypes" component={AssetTypes} />
          </Switch>
        </Router>
      </GlobalProvider>
    </div>
  );
}

export default App;

Http.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);

  console.log("after useLUGet");

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

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

export default AssetTypes();

Answer 1

这是因为您以错误的方式导出了“ AssetTypes”。您的导出方式如下：

export default AssetTypes();

将其更改为：

export default AssetTypes;

发射自定义钩子的困惑

1 个答案: