useRef() 无效的钩子调用 [NextJs]
Posted
技术标签:
【中文标题】useRef() 无效的钩子调用 [NextJs]【英文标题】:useRef() Invalid hook call [NextJs] 【发布时间】:2020-12-18 12:22:47 【问题描述】:我正在尝试在 NextJs 项目中的函数组件主体内使用 useRef()
挂钩,但仍然收到以下错误。我已经浏览了 React Hook 规则,但我找不到这个错误的原因,这不起作用。
有人有想法吗?
错误:无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一:
import React, useRef from 'react';
export default function Diagram()
const svgRef = useRef();
return (
<>
<div className="container-svg py-4">
<svg ref=svgRef viewBox="0 0 300 300">
<g transform="translate(150, 150)">
<g>
<path id="triangle" d="M0, -125 L-150,150 L150, 150 L0, -125 M 0,50 L-150, 150 M150, 150 L0,50 L0,-125" stroke="black" fill="none"/>
</g>
posts.map( post =>
return (
<circle key=post.id className="circle" cx=post.point.x cy=post.point.y r="5" />
)
)
<circle className="circle" cx="0" cy="0" r="5" />
</g>
</svg>
</div>
</>
)
【问题讨论】:
能贴个codeandbox的链接吗?因为代码看起来是合法的。 我在一个沙盒上试了一下,它按预期工作。在我的本地项目中,我使用createRef()
使其工作。但我不能用 useRef;我不知道它是否与一些 NextJs 的细节有关,或者什么。感谢您的帮助!
【参考方案1】:
我使用的是next 10.1.3
和react 17.0.1
,我使用的是React.createRef()
,因为useRef()
不起作用。我根据最初提出的问题做了一个例子。我添加这个是因为 cmets 中的 createRef 答案不完整,这很容易理解。
import React from 'react';
export default function Diagram()
const svgRef = React.createRef();
return (
<>
<div className="container-svg py-4">
<svg ref=svgRef viewBox="0 0 300 300">
...
【讨论】:
以上是关于useRef() 无效的钩子调用 [NextJs]的主要内容,如果未能解决你的问题,请参考以下文章
React Hooks 不适用于 Firebase Cloud Functions 错误:不变违规:无效的钩子调用
Hooks 错误:在 Windows 上使用 NextJS 或 ReactJS 的 Hook Call 无效