redux ERROR错误:操作必须是普通对象,实际的类型是:'未定义'

bwitn5fc  于 2023-05-23  发布在  其他
关注(0)|答案(1)|浏览(138)

我试图访问用户位置时,他们点击一个按钮,但我一直得到一个错误,
ERROR错误:操作必须是普通对象。实际的类型是:'未定义'。您可能需要在存储设置中添加中间件来处理分派其他值,例如'redux-thunk'来处理分派函数。我通过react redux,发现react redux处理异步函数,所以我去添加thunk在我的项目存储,但仍然得到tesame错误
这是我的代码
//store.js 文件

import { userSlice } from './slices/userSlice';
import { homeSlice } from './slices/HomeSlice';
import thunk from 'redux-thunk';
// import thunkMiddleware from 'redux-thunk';

const rootReducer = combineReducers({
    user: userSlice.reducer,
    home: homeSlice.reducer,
});

const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(thunk),
});

export default store;

//userslice.js

const initialState = {
    userLocation: null,
}

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        
        setUserLocation: (state, action) => {
            state.userLocation = action.payload
        },
    },
})

// Action creators are generated for each case reducer function
export const { setUserLocation,} = userSlice.actions

export const selectUserLocation = (state) => state.user.userLocation

export default userSlice.reducer
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { selectSearchMode } from '../slices/HomeSlice';
import { selectUserLocation, setUserLocation } from '../slices/userSlice';
import FlatButton from '../component/FlatButton';
import SearchComponent from '../component/for_user/SearchComponent';
import tw from 'twrnc';
import * as Location from 'expo-location';

const LocationCheckerScreen = () => {
    const [locationPermission, setLocationPermission] = useState(false);
    const [userLocation, setUserLocation] = useState(null);
    const selectSearchMod = useSelector(selectSearchMode);
    const selectLocationChecker = useSelector(selectUserLocation);
    const dispatch = useDispatch();

    const handleLocation = (location) => {
        if (location === null || location === undefined) {
            dispatch(setUserLocation({ location: null }));
        } else {
            dispatch(setUserLocation({ location }));
        }
    };

    const setCurrentLocation = async () => {
        try {
            let { status } = await Location.requestForegroundPermissionsAsync();

            if (status !== 'granted') {
                console.log('Permission to access location was denied');
                return;
            }

            let location = await Location.getCurrentPositionAsync({});
            if (location){
                setUserLocation(location)
            }
        } catch (error) {
            console.log('Error occurred while getting location:', error);
        }
    };

    useEffect(() => {
        setCurrentLocation();
    }, []);

    useEffect(() => {
        if (userLocation && userLocation !== "later") {
            handleLocation(userLocation);
        }
    }, [userLocation]); 

    return (
        <SafeAreaView style={tw`px-4 flex-1 pb-4`}>
            {selectLocationChecker === null ? (
                <View style={tw`px-4 justify-center`}>
                    <View style={tw`my-6`}>
                        <Text style={tw`text-xl mb-3 font-semibold text-center`}>Where is your present location?</Text>
                        <Text style={tw`text-[14px] text-center`}>
                            Let us help the employer easily find your location and ensure a smooth and efficient process in locating
                            you.
                        </Text>
                    </View>
                    <View style={tw`px-5 mt-3`}>
                        <FlatButton text="Set location automatically" onPress={() => setCurrentLocation()} />
                        <TouchableOpacity
                            style={tw`flex-row justify-center p-[6px] mt-3 border-2 border-gray-500 rounded-lg hover:bg-gray-300`}
                            onPress={() => handleLocation('later')}
                        >
                            <Text style={tw`text-lg font-semibold`}>Set later</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            ) : (
                <View style={tw`px-6 flex-1`}>
                    <SearchComponent />
                </View>
            )}
        </SafeAreaView>
    );
};

export default LocationCheckerScreen;

const styles = StyleSheet.create({});
wj8zmpe1

wj8zmpe11#

我认为这是因为你的状态设置器和动作同名。这是你的行动

export const { setUserLocation,} = userSlice.actions

LocationCheckerScreen中,您有此useState

const [userLocation, setUserLocation] = useState(null);

当你分派的时候,我认为你分派的是useState setter

if (location === null || location === undefined) {
        dispatch(setUserLocation({ location: null }));

更改useState setter的名称

相关问题