使用带有上下文的全局状态

Question

我目前正在尝试在我的应用程序中设置一个全局状态。 这只是计算点数，因此是全球“分数”。 上下文似乎很简单，我遵循了一些教程，但它不断发送错误。

在我的应用程序中，我使用 React 和 BrowserRouter 在页面之间切换。

App.jsx可以看到，我尝试用 Store 组件包裹

export default function App() {
  return (
    <main>
      <Routes>
        <Store>
          <Route path="/" element={<Welcome />} />
          <Route path="/whoareyou" element={<WhoAreYou />} />
          <Route path="/questionone" element={<QuestionOne />} />
          <Route path="/questiontwo" element={<QuestionTwo />} />
          <Route path="/questionthree" element={<QuestionThree />} />
          <Route path="/result" element={<Result />} />
        </Store>
      </Routes>
    </main>
  );
}

Points.js这是我的上下文文件

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

const initialState = { points: 0 };

export const Context = createContext(initialState);

export const Store = ({ children }) => {
  const [state, setState] = useState(initialState);
  return (
    <Context.Provider value={[state, setState]}>{children}</Context.Provider>
  );
};

组件这是我的组件，我想将 1 计入“分数”分数

export default function WhoAreYou() {
  const [state, setState] = useContext(Context);

  return (
    <StyledSection variant="center">
      <StyledNavLink to="/questionone">
        <StyledButton
          type="button"
          variant="next-button"
          onClick={() => {
            console.log(state.points);
          }}
        >
          NEXT
        </StyledButton>
      </StyledNavLink>
    </StyledSection>
  );
}

错误

这是错误消息：

undefined 不是一个对象（评估'element.type.name'）

警告：React.jsx：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。 您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查App的渲染方法。 应用路由器浏览器路由器

---

要查看整个代码，您可以查看此 CodeSandBox：

https://codesandbox.io/s/empty-https-gpkq0l?file=/src/components/pages/WhoAreYou.jsx:581-1422

---

如果你们能提供帮助，我将非常感谢！

Answer 1

导入存储为命名导入（您将其导出为命名导出）

import { Store } from "../src/components/context/Points";