我有一个从redux商店获取'carDataMap'的组件。我调用函数'initializeCarDataMap()'(它使用来自同一存储的'selection')来设置其初始状态,但遇到错误:
无效的钩子调用。钩子只能在函数组件的主体内部调用。
如何正确初始化redux存储中的carDataMap,它使用来自同一redux存储的值?
interface Props {}
export type CarDataMapType = { [car: string]: Data };
export function initializeCarDataMap(): CarDataMapType {
const initialMap: CarDataMapType = {};
const initialData = createDefaultData();
const cars = useSelector((store: StoreState) => store.select).selection.cars;
for (const car of cars) {
initialMap[car] = initialData;
}
return initialMap;
}
export const CarDataMapWindow: React.FC<Props> = props => {
const carDataMap = useSelector((store: StoreState) => store.select).carDataMap;
return ();
};
// redux store ---------------------------------
import {
initializeCarDataMap,
getSelection,
CarDataMapType,
};
export interface SelectState {
selection: Selection;
carDataMap: CarDataMapType;
}
const initialState: SelectState = {
selection: getSelection(),
carDataMap: initializeCarDataMap(),
};
const store = createSlice({
name: 'select',
initialState,
reducers: {
setCarDataMap: (state, action: PayloadAction<{ car: string; data: Data }>) => {
state.carDataMap[action.payload.car] = action.payload.data;
},
},
});
export default store.reducer;
export const {
setCarDataMap,
} = store.actions;
字符串
1条答案
按热度按时间ux6nzvsh1#
这里
initializeCarDataMap
不被认为是一个React组件,因为它不以大写字母开头,也不是一个自定义钩子,因为它不以use
前缀开头,所以它只是一个简单的JavaScript函数,因此你不能在它内部调用钩子。仅从React函数调用Hooks
不要从常规JavaScript函数调用Hooks。相反,您可以:
从React函数组件调用Hooks。
从自定义Hooks调用Hooks(我们将学习Building Your Own Hooks)。
客户挂钩:
自定义Hook是一个JavaScript函数,其名称以“use”开头,并且可以调用其他Hook。
你只需要将你的函数重命名为
useInitializeCarDataMap
。