在React应用程序中使用某些路由时出现无效的钩子调用错误

Question

我正在使用 Dockerized React+express+nginx 堆栈。由于某种原因，我只能在

Route

v6 中的几个

react-router-dom

组件中使用钩子。示例：

应用程序.jsx

 <div className="App">

      <Routes location={state?.backgroundLocation || location} >
        <Route path="/" element={<Layout />} >
          <Route index element={<TitleScreen />} />
          <Route path="/salas/" element={<RoomsScreen />} />        // INVALID HOOK CALL
          <Route path="/como-jogar" element={<h1>Como Jogar</h1>} />
          <Route path="/sala/:id" element={<RoomScreen />} />       // HOOKS WORK HERE
          <Route path="*" element={<h1>404</h1>} />
        </Route>
      </Routes>
      ...

我试图让钩子在这个函数内工作 RoomsScreen.jsx

function RoomsScreen() {
    const { rooms, loading, error, fetchRooms } = useGetRooms();

    const handleRefresh = () => {
        //should refresh RoomList
    }

    return (
        <>
            <Header title="Salas" visible={true} handleRefresh={handleRefresh} />
            <RoomList rooms={rooms} loading={loading} />
            <div className="flex-row m-1">
                <LinkButton text="Criar Sala" to="/criar-sala" useBackground={true} />
            </div>

        </>
    )
}

这是有问题的自定义挂钩 使用GetRooms.jsx

const useGetRooms = () => {
    const [rooms, setRooms] = useState([]);       // THIS IS THE INVALID HOOK
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const fetchRooms = async () => {
        try {
            const response = await getRequestWithFetch("/api/room");
            setRooms(response.rooms);
        } catch (err) {
            setError(err);
        } finally {
            setLoading(false);
        }
    };

    return { rooms, loading, error, fetchRooms };
};

我做错了什么？

我尝试过...

我检查了 package.json 并且安装正常。 我尝试使用功能组件。 我还尝试移动代码块，并尝试在树中的哪个位置调用钩子。 如果我在 RoomList （RoomScreen 的子级）内调用它，它可以工作，但我需要它更顶层。

Answer 1

我确实使用 json 占位符 api 制作了一个自定义挂钩的示例，如下所示：

使用GetRooms.js

import { useState } from "react";

export const useGetRooms = () => {
  const [rooms, setRooms] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const getRequestWithFetch = async (url) => {
    setLoading(true);
    return await fetch(url)
      .then((res) => res.json())
      .then((data) => data);
  };

  const fetchRooms = async () => {
    try {
      const response = await getRequestWithFetch(
        "https://jsonplaceholder.typicode.com/todos"
      );
      setRooms(response);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  return { rooms, loading, error, fetchRooms };
};

应用程序.js

const { error, fetchRooms, loading, rooms } = useGetRooms();

<div>
 {rooms.map((each) => (
   <div>{JSON.stringify(each)}</div>
 ))}
</div>
<button onClick={fetchRooms}>{loading ? "Loading" : "Click"}</button>

并且没有错误，因此您需要确保您正在调用的 api 返回您需要的数据。在反应路由中的任何地方调用自定义挂钩都不会出现问题。