useRef无效的挂钩调用[NextJs]

问题描述

我正在尝试在NextJs项目的功能组件主体内使用useRef()钩子，但仍然出现以下错误。我已经完成了React Hook规则，但找不到该错误的原因，并且无法正常工作。 有人有主意吗？

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

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,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>
      </>
  )
}

解决方法

您可以尝试将null作为参数传递给useRef钩子，如下所示：

const svgRef = useRef(null);

,

我使用了 next 10.1.3 和 react 17.0.1，我使用了 React.createRef()，因为 useRef() 不起作用。我根据最初提出的问题做了一个例子。我添加这个是因为评论中的 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">

...