React-Typescript,redux toolkit - 类型为字符串的表达式无法用于索引类型'Writable Draft'。

12 浏览
0 Comments

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

}, // 这里有一个错误

},

})。

0
0 Comments

问题的出现原因是,INITIAL_VALUE 推断出你定义的值的类型,因此只能直接映射与属性名称(即 INITIAL_VALUE 的键)相对应的键,而不能使用字符串类型。

解决方法是,为 initialState 定义一个类型,并将其定义为 filterName prop 的 keyof InitialState

另一种解决方法是,将 filterName 的类型定义为 keyof typeof INITIAL_VALUE,如果你不想将类型提取到单独的类型定义中,并希望保持原样。

此外,还需要删除不再需要的类型转换 [] as Recipe[]

最后,检查代码中是否存在类型不匹配的问题。

以上是问题的原因和解决方法,希望能帮助到你。

0