使用帶有上下文的全局狀態

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";