javascript - 在上下文使用者上使用 useContext() 时反应上下文“属性‘状态’不存在”
问题描述
我正在尝试在我的 React 项目中实现上下文。每次我尝试实现这个上下文时,我都会得到同样的错误:
Property 'state' does not exist on type '{ count: number; currentColor: string; }'.
> 40 | let { state, dispatch } = React.useContext(ContextOne);
| ^
上下文提供程序代码:
import * as React from "react";
let ContextOne = React.createContext(initialState);
let initialState = {
count: 10,
currentColor: "#bada55"
};
let reducer = (state, action) => {
switch (action.type) {
case "reset":
return initialState;
case "increment":
return { ...state, count: state.count + 1 };
case "decrement":
return { ...state, count: state.count - 1 };
case "set-color":
return { ...state, currentColor: action.payload };
}
};
function ContextOneProvider(props) {
let [state, dispatch] = React.useReducer(reducer, initialState);
let value = { state, dispatch };
return (
<ContextOne.Provider value={value}>{props.children}</ContextOne.Provider>
);
}
let ContextOneConsumer = ContextOne.Consumer;
export { ContextOne, ContextOneProvider, ContextOneConsumer };
我尝试了许多在线示例上下文提供程序,但每次调用 useContext() 时,都会出现相同的错误。需要修改哪些内容才能使 Context 正常工作?
- - - - - - - - - - - - - - - - - - - - - 编辑 - - - - ----------------------------------
感谢 soywood,这里是工作上下文提供程序代码:
import * as React from "react";
type State = {
count: number
currentColor: string
}
const initialState: State = {
count: 10,
currentColor: "#bada55",
};
type Context = {
state: State
dispatch: React.Dispatch<Action>
}
type Action = {
type: string,
payload: string
}
const ContextOne = React.createContext<Context>({
state: initialState,
dispatch: () => {},
});
// You need to define the type Action
const reducer: React.Reducer<State, Action> = (state, action) => {
switch (action.type) {
case "reset":
return initialState;
case "increment":
return { ...state, count: state.count + 1 };
case "decrement":
return { ...state, count: state.count - 1 };
case "set-color":
return { ...state, currentColor: action.payload };
}
};
function ContextOneProvider(props) {
const [state, dispatch] = React.useReducer(reducer, initialState);
const value: Context = { state, dispatch };
return (
<ContextOne.Provider value={value}>{props.children} </ContextOne.Provider>
);
}
let ContextOneConsumer = ContextOne.Consumer;
export { ContextOne, ContextOneProvider, ContextOneConsumer };
解决方案
createContext
参数类型应与您的值ContextOne.Provider
类型匹配。您还需要改进您的类型以指导更多的TypeScript
编译器:
import * as React from "react";
type State = {
count: number
currentColor: string
}
const initialState: State = {
count: 10,
currentColor: "#bada55",
};
type Context = {
state: State
dispatch: React.Dispatch<State>
}
const ContextOne = React.createContext<Context>({
state: initialState,
dispatch: () => {},
});
// You need to define the type Action
const reducer: React.Reducer<State, Action> = (state, action) => {
switch (action.type) {
case "reset":
return initialState;
case "increment":
return { ...state, count: state.count + 1 };
case "decrement":
return { ...state, count: state.count - 1 };
case "set-color":
return { ...state, currentColor: action.payload };
}
};
function ContextOneProvider(props) {
const [state, dispatch] = React.useReducer(reducer, initialState);
const value: Context = { state, dispatch };
return (
<ContextOne.Provider value={value}>{props.children} </ContextOne.Provider>
);
}
let ContextOneConsumer = ContextOne.Consumer;
export { ContextOne, ContextOneProvider, ContextOneConsumer };
推荐阅读
- c# - DeploymentItem(Path,outputDirectory)在新的单元测试项目中不起作用
- excel - Excel VBA 编辑 - 识别要合并的列
- php - 为什么结果是链接而不是数组?(谷歌搜索使用 PHP 抓取)
- node.js - 如何使用打字稿和猫鼬?
- azure-devops - 如何根据构建管道的路径过滤器触发 DevOps 发布管道
- r - 如何在 R 中创建具有聚类(按公司)标准误差的线性模型输出
- css - 如何在 React 应用程序中对 Web 组件进行样式化?
- python - Python 未被识别为内部或外部命令
- visual-studio - 使用困难
模块化 Visual Studio 项目文件 - java - 如何更改 JFrame 的背景颜色?