- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
一个 无效 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 .我知道我搞砸了,但我不知道在哪里。
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/
问题 我想在可由用户添加的表单中实现输入字段的键/值对。 参见 animated gif on dynamic fields . 此外,我想在用户提交表单并再次显示页面时显示保存的数据。 参见 ani
这个问题已经有答案了: The useState set method is not reflecting a change immediately (19 个回答) 已关闭去年。 问题是,在网页中该
这个问题已经有答案了: The useState set method is not reflecting a change immediately (19 个回答) 已关闭去年。 问题是,在网页中该
我对钩子(Hook)相当陌生,我正在尝试实现一个拖放容器组件,该组件在整个鼠标移动过程中处理 onDragStart、onDrag 和 onDragEnd 函数。我一直在尝试使用钩子(Hook)复制此
有人向我介绍了 CSS 钩子(Hook)这个术语,但我对此不是很清楚。你能给我一些想法吗? 什么是 CSS 钩子(Hook)? 最常见的钩子(Hook)是什么? 使用 CSS 钩子(Hook)的最佳做
文档 ( https://devexpress.github.io/testcafe/documentation/test-api/test-code-structure.html#test-hook
问题是包含 PR_Write() 的 DLL 调用的不是 npsr4.dll,而是 nss3.dll 和 Hook 无法从不存在的库中找到 GetProcAddress()。 我正在尝试创建 Fire
我的 git hook 似乎没有工作。即commit-msg来自 gerrit 的钩子(Hook)。 commit-msg Hook 存在于 /.git/hooks/并具有正确的语法。 最佳答案 确保
用gdb调试不熟悉的程序时,程序执行后经常会意外退出next .发生这种情况时,我通常会设置一个断点,重新运行程序并执行 step而不是 next追踪正在发生的事情。但是,有时很难知道在哪里设置断点。
当我创建一个节点时,我希望它以编程方式创建一些引用刚刚创建的节点的节点。 虽然我只需要更改表单的 form_alter 提交函数来调用自定义函数来创建节点。 检查输出 $form_state 我可以看
我是钩子(Hook)的新手,在学习了对类的 react 之后才来,所以有点迷茫。在下面的代码中,我将 setDog 更改为 Husky,然后它应该告诉 API 调用搜索并获取我的哈士奇图片。但是,尽管
我编写(进程中)钩子(Hook)以防止在本地添加 BAD 标记名称: .hg/hgrc : pretag.badtagname = python:.hg/hgcheck.py:localbadtag
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?将问题更新为 on-topic对于堆栈溢出。 7年前关闭。 Improve this qu
如果这个问题之前已经得到解答,我提前表示歉意(对于这篇长文,但我已尽力做到具体)。但是,我找到的答案并不完全令我满意。 我想在我的项目中使用新的令人惊叹的 React Hooks。到目前为止我所做的一
通过阅读一些文字,尤其是关于委托(delegate)的iOS文档,所有协议(protocol)方法都被称为 Hook 自定义委托(delegate)对象需要实现。但是其他一些书,命名为 Hook 作为
我的所有依赖项都位于受密码保护的存储库中。 我有一个要求输入用户名和密码的功能,但它经常困扰我。 有没有办法在依赖检索之前执行它? 在大多数情况下,我在本地 maven/gradle 缓存中拥有所有依
当我尝试运行 git commit -m 'message here' 时出现以下错误。 致命:无法执行 '.git/hooks/prepare-commit-msg':权限被拒绝 当我在我的 ubu
当我尝试运行 git commit -m 'message here' 时出现以下错误。 致命:无法执行 '.git/hooks/prepare-commit-msg':权限被拒绝 当我在我的 ubu
我有一个分支和主干的服务器存储库。分支是所有团队成员的存储库。我正在尝试使用 svn hooks仅在我的分支下的 repo 中,但它似乎无法正常工作。以下是我尝试采取的步骤: checkout my_
我正在尝试为我的模块找到一种在安装时创建 anchor 链接的方法。 我目前的策略是创建一个自定义菜单,类似于主菜单、次菜单等并位于其中。在此菜单中,我希望有一个或多个由我的模块定义的链接。然后我希望
我是一名优秀的程序员,十分优秀!