useRef() 無效的鈎子調用 [NextJs]

Question

我正在嘗試在 NextJs 項目的 function 組件主體內使用useRef()掛鈎，但我仍然收到以下錯誤。 我已經完成了 React Hook 規則，但我找不到這個錯誤的原因並且這不起作用。 有人有想法嗎？

錯誤：無效掛鈎調用。 鈎子只能在 function 組件的內部調用。 這可能由於以下原因之一而發生：

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

Answer 1

我正在嘗試在 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, 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>
      </>
  )
}

Answer 2

我正在使用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">

...