useContext 在 Gatsby 应用程序中返回一个空对象

Question

使用 useContext() 时，我得到一个空对象。

我创建了一个包含我的上下文、提供者和消费者的文件

src/utils/notesContext.js

import PropTypes from "prop-types"
import React, { createContext, useState } from "react"

export const Context = createContext({})

export const Provider = props => {
  const {
    notes: initialNotes,
    selectedNote: initialSelectedNotes,
    children,
  } = props

  const [notes, setNotes] = useState([[""]])
  const [selectedNote, setSelectedNote] = useState([[""]])

  const addNewNote = note => {
    console.log(note)
  }

  const notesContext = {
    notes,
    setNotes,
    selectedNote,
    setSelectedNote,
    addNewNote,
  }

  return <Context.Provider value={notesContext}>{children}</Context.Provider>
}

export const { Consumer } = Context

Provider.propTypes = {
  notes: PropTypes.array,
  selectedNote: PropTypes.object,
}

Provider.defaultProps = {
  notes: [],
  selectedNote: {},
}

然后在我的索引文件中，我有以下内容

src/pages/index.js

import React, { useContext } from "react"
import { Context } from "../utils/notesContext"

const Index = ({ data, location }) => {
  const initNote = data.note

  const notesContext = useContext(Context) // notesContext is empty
  const { notes, selectedNote, setSelectedNote, addNewNote } = notesContext
  addNewNote(initNote)
...
}

我是否对我的上下文或提供者进行了不正确的设置？另一件值得一提的事情是，这是在 Gatsby 应用程序中，所以不确定这是否会导致我不知道的潜在问题。

提前致谢！

Answer 1

您的 Index 组件应该在 notesContext Provider.

中使用

详细了解 Context.Provider。

import { Context, Provider } from "./notesContext";

const Index = () => {
  const notesContext = useContext(Context);
  console.log(notesContext); // now this is not an empty object

  return <p>Index</p>;
};

export default function App() {
  // notice here, we're wrapping Index inside our Provider
  return (
    <Provider>
      <Index />
    </Provider>
  );
}

useContext 在 Gatsby 应用程序中返回一个空对象

useContext returning an empty object in Gatsby application

reactjs

react-hooks

gatsby

use-context