React-Native中Reducer出现‘null is not an object’错误如何解决？

页面加载时Redux中origin初始状态为null，Map组件直接访问origin.location导致空值报错。

解决方案 #

方案1：条件渲染，origin存在时再渲染MapView #

修改Map.js，先判断origin是否存在，不存在时显示占位提示，存在再渲染地图：

import { Dimensions, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
import { useSelector } from 'react-redux'
import { selectOrigin } from './navSlice'

const Map = () => {
  const origin = useSelector(selectOrigin);

  if (!origin) {
    return <View style={styles.map}><Text>请选择起点位置</Text></View>;
  }

  return (
    <MapView
      style={styles.map}
      provider={PROVIDER_GOOGLE}
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
    }}
  />
  )
}

const styles = StyleSheet.create({
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

export default Map

方案2：设置origin默认初始值，避免null #

修改navSlice.js的初始状态，给origin设置默认坐标（比如默认城市）：

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    // 设置默认初始位置（示例：旧金山坐标）
    origin: {
        location: { lat: 37.78825, lng: -122.4324 },
        description: '默认位置'
    },
    destination: null,
    travelTimeInformation: null,
}

export const navSlice = createSlice ({
    name: 'nav',
    initialState,
    reducers: {
        setOrigin: (state, action) => {
            state.origin = action.payload;
        },
        setDestination: (state, action) => {
            state.destination = action.payload;
        },
        setTravelTimeInformation: (state, action) => {
            state.travelTimeInformation= action.payload;
        },
    },
});

export const { setOrigin, setDestination, setTravelTimeInformation} = navSlice.actions;

export const selectOrigin = (state) => state.nav.origin;
export const selectDestination = (state) => state.nav.destination;
export const selectTravelTimeInformation = (state) => state.nav.travelTimeInformation;

export default navSlice.reducer;

方案3：使用可选链操作符(?.)优雅处理空值 #

在Map.js中用可选链避免空值访问，同时设置默认初始区域：

import { Dimensions, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
import { useSelector } from 'react-redux'
import { selectOrigin } from './navSlice'

const Map = () => {
  const origin = useSelector(selectOrigin);

  return (
    <MapView
      style={styles.map}
      provider={PROVIDER_GOOGLE}
      initialRegion={{
        latitude: origin?.location?.lat || 37.78825,
        longitude: origin?.location?.lng || -122.4324,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
    }}
  />
  )
}

const styles = StyleSheet.create({
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  }
})

export default Map

内容的提问来源于stack exchange，提问作者lipian