javascript useRef()无效的钩子调用[NextJs]

xe55xuns 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(99)

我试图在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>
      </>
  )
}

JavaScript

来源：https://stackoverflow.com/questions/63652894/useref-invalid-hook-call-nextjs

2条答案

按热度按时间

mzmfm0qo1#

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

...

赞(0）回复(0）举报 2023-09-29

tp5buhyn2#

这可能是因为useRef（）和其他react钩子对于客户端组件是独占的。如果你没有指定你的组件是客户端的，那么NextJS的后续版本会默认这是一个服务器端的组件。使用指令“use client”在客户端环境中呈现此组件。

赞(0）回复(0）举报 2023-09-29