React-Typescript,redux toolkit - 类型为字符串的表达式无法用于索引类型'Writable Draft'。
React-Typescript,redux toolkit - 类型为字符串的表达式无法用于索引类型'Writable Draft'。
你好,我有一个问题,我得到了一个错误,标题中的表达式类型为string,无法用于索引类型'WritableDraft'。我想将其设置为动态的,以避免许多"if"语句。为什么在更新类型定义后,filterName: keyOf InitialState后,我会得到一个错误:
属性 'push' 在类型 'string | string[] | WritableDraft[] | WritableDraft<{ recipes: Recipe[]; totalAmount: number; }>' 上不存在。 属性 'push' 在类型 'string' 上不存在。
在以下代码的一行中:
addFilters(state, action: PayloadAction) { state[action.payload.nameOfFilter].push(action.payload.content); },
过滤类型:
export type FilteringConfiguration = {
content: string;
type: typeOfFiltering;
set: boolean;
filterName: key of InitialState;
};
组件:
const onChangeHandler = (e: React.ChangeEvent
const content = e.target.value;
dispatch(
recipeAction.setFilters({
type: props.type,
set: e.target.checked,
content: content,
filterName: "filterTypes",
})
);
};
Redux Toolkit:
const INITIAL_VALUE: InitialState = {
recipes: [],
likedRecipes: {
recipes: [],
totalAmount: 0,
},
recipeTypes: ["早餐", "午餐", "晚餐", "宵夜"],
recipeTime: [
"很短(约30分钟)",
"短(约1小时)",
"中等(约3小时)",
"长(约6小时)",
],
// 用于过滤食谱的变量
recipeTitle: "",
filterTypes: [],
filterLengths: [],
};
const recipeSlice = createSlice({
name: "recipe",
initialState: INITIAL_VALUE,
reducers: {
addFilters(state, action: PayloadAction
state[action.payload.filterName].push(action.payload.content);
}, // 这里有一个错误
},
})。
问题的出现原因是,INITIAL_VALUE
推断出你定义的值的类型,因此只能直接映射与属性名称(即 INITIAL_VALUE
的键)相对应的键,而不能使用字符串类型。
解决方法是,为 initialState
定义一个类型,并将其定义为 filterName
prop 的 keyof InitialState
。
另一种解决方法是,将 filterName
的类型定义为 keyof typeof INITIAL_VALUE
,如果你不想将类型提取到单独的类型定义中,并希望保持原样。
此外,还需要删除不再需要的类型转换 [] as Recipe[]
。
最后,检查代码中是否存在类型不匹配的问题。
以上是问题的原因和解决方法,希望能帮助到你。