如何从同一个store react typescript中的另一个值初始化一个redux store值

mkshixfv  于 2023-08-05  发布在  React
关注(0)|答案(1)|浏览(147)

我有一个从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;

字符串

ux6nzvsh

ux6nzvsh1#

这里initializeCarDataMap不被认为是一个React组件,因为它不以大写字母开头,也不是一个自定义钩子,因为它不以use前缀开头,所以它只是一个简单的JavaScript函数,因此你不能在它内部调用钩子。

仅从React函数调用Hooks

不要从常规JavaScript函数调用Hooks。相反,您可以:

从React函数组件调用Hooks。
从自定义Hooks调用Hooks(我们将学习Building Your Own Hooks)。

客户挂钩:

自定义Hook是一个JavaScript函数,其名称以“use”开头,并且可以调用其他Hook。
你只需要将你的函数重命名为useInitializeCarDataMap

相关问题