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.3react 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 无效

React - nextjs 在 useEffect 中调用自定义钩子

useRef 反应钩子

如何在我的组件库中使用 React 钩子?

在 React 自定义钩子中正确输入 useRef 值