useContext 在同一个文件中不起作用

Question

所以不确定这是否正是问题所在，但想知道为什么在同一文件和不同文件中使用上下文时会发生这种情况。

所以这是常量：

StartupContext.js

import React from "react";

export const StartupContext = React.createContext()

export const StartupProvider = ({ something, children }) => {
    return (
        <StartupContext.Provider value={{ something }}>
            {children}
        </StartupContext.Provider>
    )
}

没问题。但是当我运行这个：

App.js

function Root() {
  const { something } = useContext(StartupContext);

  return (
    <Text>Root {something}</Text>
  )
}

export default function App() {
  const [something, setSomething] = useState("ayyyy")

  return (
    <StartupProvider something={something}>
      <Root />
    </StartupProvider>
  );
}

我会得到这个错误：

TypeError: undefined is not an object (evaluating 'Context._context')

但是

如果我分成两个文件

App.js

import { Root } from "./Root";

export default function App() {
  const [something, setSomething] = useState("ayyyy")

  return (
    <StartupProvider something={something}>
      <Root />
    </StartupProvider>
  );
}

Root.js

export default function Root() {
  const { something } = useContext(StartupContext);

  return (
    <Text>Root {something}</Text>
  )
}

它将正常工作。为什么会这样？

Answer 1

天哪。这是完全不同的东西。

我正在导入单个文件：

import StartupContext from "./app/contexts/startupContext";

哪里错了，我应该是这样的：

import { StartupContext } from "./app/contexts/startupContext";

useContext 在同一个文件中不起作用

useContext doesn't work when in same file

reactjs

react-native

use-context

StartupContext.js

App.js

App.js

Root.js