gpt4 book ai didi

javascript - react 路由器显示无效的钩子(Hook)调用

转载 作者:行者123 更新时间:2023-12-05 00:30:59 26 4
gpt4 key购买 nike

一个 无效 Hook 我的 react 应用程序中发生了由 react 路由器引起的错误,但我似乎无法检测到它来自哪里。完整的错误如下:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
我没有 React 版本不匹配,也不是由上述任何原因引起的错误(不能肯定,但我没有)。我遵循了 react-router 文档 here .我知道我搞砸了,但我不知道在哪里。
以下是必要的组件,从入口文件开始。
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import {
ApolloProvider,
ApolloClient,
createHttpLink,
InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import {AUTH_TOKEN} from "./constants";
import App from "./components/App";
import "./styles/index.css";

const httpLink = createHttpLink({ uri: "http://localhost:4000" });

const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem(AUTH_TOKEN);

return {
...headers,
authorization: token ? `Bearer ${token}` : "",
};
});

/*Instantiates Apollo client and connect to GraphQL server.
This will take the server link and an instantiation of the cache funtionality*/
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});

ReactDOM.render(
<BrowserRouter>
<ApolloProvider client={client}>
<React.StrictMode>
<App />
</React.StrictMode>
</ApolloProvider>
</BrowserRouter>,
document.getElementById("root")
);
应用.js
import React from "react";
import LinkList from "./LinkList";
import CreateLink from "./CreateLink";
import Header from "./Header";
import Login from './Login';
import { Routes, Route } from "react-router-dom";
import "../styles/App.css";

function App() {
return (
<div className="center w85">
<Header />
<div className="ph3 pv1 background-gray">
<Routes>
<Route path="/" element={<LinkList/>} />
<Route path="/create" element={<CreateLink/>} />
<Route path="/login" element={<Login/>} />
</Routes>
</div>
</div>
);
}

export default App;
Header.js
import React from "react";
import { useNavigate, Link } from "react-router-dom";
import { AUTH_TOKEN } from "../constants";

export default function Header() {
const history = useNavigate();
const authToken = localStorage.getItem(AUTH_TOKEN);

return (
<div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black">
<div className="fw7 mr1">Hacker News</div>
<Link to="/" className="ml1 no-underline black">
new
</Link>
<div className="ml1">|</div>
<Link to="/top" className="ml1 no-underline black">
top
</Link>
<div className="ml1">|</div>
<Link to="/search" className="ml1 no-underline black">
search
</Link>
{authToken && (
<div className="flex">
<div className="ml1">|</div>
<Link to="/create" className="ml1 no-underline black">
submit
</Link>
</div>
)}
</div>
<div className="flex flex-fixed">
{authToken ? (
<div
className="ml1 pointer black"
onClick={() => {
localStorage.removeItem(AUTH_TOKEN);
history.push(`/`);
}}
>
logout
</div>
) : (
<Link to="/login" className="ml1 no-underline black">
login
</Link>
)}
</div>
</div>
);
}
链接列表.js
import React from "react";
import { useQuery, gql } from "@apollo/client";
import Link from "./Link";

const LinkList = () => {

const FEED_QUERY = gql`
{
feed {
id
links {
id
createdAt
url
description
}
}
}
`;

const { loading, error, data } = useQuery(FEED_QUERY);

if (loading) return <p style={{padding: 20, textAlign:"center"}}>Loading...</p>;

if (error) console.log(error);

return (
<div>
{data &&
data.feed.links.map((link) => <Link key={link.id} link={link} />)}
</div>
);
};

export default LinkList;
CreateLink.js
import React, { useState } from "react";
import { useMutation, gql } from "@apollo/client";
import { useNavigate } from "react-router-dom";

export default function CreateLink() {
const [formState, setFormState] = useState({ description: "", url: "" });

const history = useNavigate();

const CREATE_LINK_MUTATION = gql`
mutation PostMutation($url: String!, $description: String!) {
post(url: $url, description: $description) {
id
createdAt
url
description
}
}
`;

const [createLink] = useMutation(CREATE_LINK_MUTATION, {
variables: {
description: formState.description,
url: formState.url,
},
onCompleted: () => history.push("/")
});

return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
createLink();
}}
>
<div className="flex flex-column mt3">
<input
type="text"
className="mt2"
placeholder="A description for the link"
onChange={(e) =>
setFormState({
...formState,
description: e.target.value,
})
}
value={formState.description}
/>
<input
className="mb2"
value={formState.url}
onChange={(e) =>
setFormState({
...formState,
url: e.target.value,
})
}
type="text"
placeholder="The URL for the link"
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
登录.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { gql, useMutation } from "@apollo/client";
import { AUTH_TOKEN } from '../constants';

export default function Login() {
let history = useNavigate();

const [formState, setFormState] = useState({
login: true,
email: "",
password: "",
name: "",
});

const SIGNUP_MUTATION = gql`
mutation SignupMutation(
$email: string
$password: string
$name: string
) {
signup(email: $email, password: $password, name: $name) {
token
user {
name
email
}
}
}
`;

const [signup] = useMutation(SIGNUP_MUTATION, {
variables: {
email: formState.email,
password: formState.password,
name: formState.password,
},
onCompleted: ({ signup }) => {
localStorage.setItem(AUTH_TOKEN, signup.token);
history.push("/create");
},
});

const LOGIN_MUTATION = gql`
mutation LoginMutation($email: string, $password: string) {
login(email: $email, password: $password) {
token
}
}
`;

const [login] = useMutation(LOGIN_MUTATION, {
variables: {
email: formState.email,
password: formState.password,
},
onCompleted: ({ login }) => {
localStorage.setItem(AUTH_TOKEN, signup.token);
history.push("/");
},
});

return (
<div>
<h4 className="mv3">{formState.login ? "Login" : "Sign Up"}</h4>
<div className="flex flex-column">
{!formState.login && (
<input
value={formState.name}
onChange={(e) =>
setFormState({
...formState,
name: e.target.value,
})
}
type="text"
placeholder="Your name"
/>
)}
<input
value={formState.email}
onChange={(e) =>
setFormState({
...formState,
email: e.target.value,
})
}
type="text"
placeholder="Your email address"
/>
<input
value={formState.password}
onChange={(e) =>
setFormState({
...formState,
password: e.target.value,
})
}
type="password"
placeholder="Choose a safe password"
/>
</div>
<div className="flex mt3">
<button
className="pointer mr2 button"
onClick={() => (formState.login ? login : signup)}
>
{formState.login ? "login" : "create account"}
</button>
<button
className="pointer button"
onClick={(e) =>
setFormState({
...formState,
login: !formState.login,
})
}
>
{formState.login
? "need to create an account?"
: "already have an account?"}
</button>
</div>
</div>
);
}
根据项目中的包安装的 React 版本:
react-apollo-integration@0.1.0 c:\projects\react-apollo-integration\frontend
+-- @apollo/client@3.4.17
| `-- react@17.0.2 deduped
+-- @testing-library/react@11.2.7
| +-- react-dom@17.0.2 deduped
| `-- react@17.0.2 deduped
+-- react-dom@17.0.2
| `-- react@17.0.2 deduped
+-- react-scripts@4.0.3
| `-- react@17.0.2 deduped
`-- react@17.0.2

最佳答案

我发现我做错了什么。我安装了react-router项目目录之外的包。我的错!

关于javascript - react 路由器显示无效的钩子(Hook)调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70039134/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com