在Context中使用全局状态

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这是我的Context文件

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

<<p>组件/strong>这是我的分量，我想把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')

警告:反应。type无效——期望是字符串(对于内置组件)或类/函数(对于复合组件)，但得到:undefined。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查App的渲染方法。应用程序路由器BrowserRouter

---

要查看整个代码，您可以看到这个CodeSandBox:

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

---

如果你们能帮忙，我将非常感谢!!

Answer 1

Import存储命名为Import(您将其导出为export)

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