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

Question

I'm currently trying to set a globalstate into my app. It's just about counting points, so a global "score". Context seemed easy and I followed some tutorials, but it keeps sending errors.

In my app, I am using React and BrowserRouter to switch between pages.

App.jsx You can see, I tried to wrap with the Store Component

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 This is my Context file

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>
  );
};

Component Here is my component, where I want to count a 1 into the "points" Score

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>
  );
}

Errors

This are the error messages:

undefined is not an object (evaluating 'element.type.name')

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App . App Router BrowserRouter

---

To See the whole code, you can see this CodeSandBox:

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

---

I would be very thankful if you guys could help!!

Answer 1

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

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