无法解构 ref 属性，因为它未定义，试图使用多个 ref 上下文

Question

我想创建一个引用上下文，在我的部分中使用该上下文的引用，然后在我的导航栏中使用该上下文以使用 intersectionObserver。

为了实现这一点，我首先为每个 ref 创建了一个上下文，然后在我的 about 组件中使用了该上下文。

上下文看起来像这样：

import React, { createContext, useRef } from "react";

export const RefsContext = createContext();

export const RefsProvider = (props) => {
  const aboutRef = useRef();
  const shopRef = useRef();
  const customersRef = useRef();
  return (
    <RefsContext.Provider
      value={{
        aboutRef,
        shopRef,
        customersRef,
      }}
    >
      {props.children}
    </RefsContext.Provider>
  );
};

export default RefsProvider;

这就是我在 about.js 中使用该上下文的方式：首先我导入上下文：import { RefsContext } from "../../../context/refsContext"; 然后我使用它：const { aboutRef } = useContext(RefsContext); 在这里我使用该 ref 来引用一个部分：<section className="about" id="about" ref={aboutRef}>

我在 about.js:10 中收到此错误消息 Uncaught TypeError: Cannot destructure property 'aboutRef' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined.，此行：const { aboutRef } = useContext(RefsContext);

Answer 1

看来您忘记包装 RefsProvider 中使用它的任何组件。这能解决这个问题吗？

编辑：为了提供更多上下文，如果您在未包装在您正在访问的上下文的提供者中的组件中使用 useContext，则该值将为 undefined。我怀疑这就是这里发生的事情。

为了解决这个问题，您需要将组件包装在 RefsProvider

中

例如：

<RefsProvider>
  <YourComponentThatUsesRefsContext />
</RefsProvider>

无法解构 ref 属性，因为它未定义，试图使用多个 ref 上下文

Cannot destructure ref property as it is undefined trying to use a multiple ref context

reactjs

react-context

react-ref

use-ref

use-context