TypeError：null 不是对象（评估“order.originLatitude”）

Question

我一直收到类型错误，因为我的代码我不知道要修复什么此错误位于：在 HomeScreen（在 App.js:11）中在 RCTView（在 View.js:32）在视图（在 SafeAreaView .js:41) 在 SafeAreaView (at App.js:10) 在 App (at renderApplication.js:50) 在 RCTView (at View.js:32) 在 View (at AppContainer.js:92) 在 RCTView (at View .js:32) 在视图中 (在 AppContainer.js:119) 在 AppContainer (在 renderApplication.js:43) 在 ClarkLoop2(RootComponent) (在 renderApplication.js:60)

const origin = {latitude: 37.3318456, longitude: -122.0296002};
const destination = {latitude: 37.771707, longitude: -122.4053769};
const GOOGLE_MAPS_APIKEY = 'API_KEY';

const HomeScreen = (props) => {
  const [isOnline, setIsOnline] = useState(false);
  const [order, setOrder] = useState(null)
  const [newOrders, setNewOrders] = useState({
      id: '1',
      type: 'Loop 1',

      originLatitude: 15.166958649105302,
      originLongitude: 120.58020821518215,

      destLatitude: 15.166958649105302,
      destLongitude: 120.58020821518215,
      
      user: {
          rating: 5.0,
          name: 'Mark',
      }
  });

  const onDecline = () => {
    setNewOrders(null);
  }

  const onAccept = (newOrders) => {
    setOrder(newOrders);
    setNewOrders(null);
  }

  const onGoPress = async () => {
    setIsOnline(!isOnline);
  }

  const renderBottomTitle = () => {


    if(order) {
        return(
        <View style={{ alignItems: 'center' }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Text>1 min</Text>
            <View style={{ backgroundColor: '#1e9203', marginHorizontal: 10, width: 30, height: 30, alignItems:'center', justifyContent: 'center', borderRadius: 20}}>
              <FontAwesome name={"user"} color={"white"} size={20} />
            </View>
            <Text>0.5 km</Text>
          </View>
          <Text style={styles.bottomText}>Picking up {order.user.name}</Text>
        </View>
        )
    }


    if (isOnline) {
        return (
        <Text style={styles.bottomText}>You're Online</Text>
        )
    }
    return <Text style={styles.bottomText}>You're Offline</Text>
  }

  return (
    <View> 
          <MapView
            style={{width: '100%', height: Dimensions.get('window').height - 90}}
            showsUserLocation={true}
            initialRegion={{
                latitude: 15.166958649105302,
                longitude: 120.58020821518215,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            >
            <MapViewDirections
                origin={origin}
                destination={{
                    latitude: order.originLatitude,
                    longitude: order.originLongitude
                }}
                apikey={GOOGLE_MAPS_APIKEY}
                />
        </MapView>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {top: 10, left: 10}]}>
        <Entypo name={"menu"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {top: 10, right: 10}]}>
        <Entypo name={"magnifying-glass"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {bottom: 125, left: 10}]}>
        <Entypo name={"shield"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={() => console.warn('Hey')}
        style={[styles.roundButton, {bottom: 125, right: 10}]}>
        <Entypo name={"info"} size={24} color="#4a4a4a"/>
      </Pressable>

      <Pressable
        onPress={onGoPress}
        style={styles.goButton}>
        <Text style={styles.goText}>
            {
                isOnline ? 'End' : 'Go'
            }
        </Text>
      </Pressable>

      <View style={styles.bottomContainer}>
        <Ionicons name={"options"} size={24} color="#4a4a4a"/>
            {renderBottomTitle()}
        <Entypo name={"list"} size={24} color="#4a4a4a"/>
      </View>

      {newOrders &&<NewOrderPopup 
      newOrders={newOrders}
      duration={2}
      distance={0.5}
      onDecline={onDecline}
      onAccept={() => onAccept(newOrders)}
      />}
    </View>
  );
};

export default HomeScreen;

Answer 1

看起来您的 order * 对象最初被设置为 null，因此当您第一次尝试在 <MapViewDirections> 组件的 props 中引用 order.originLatitude 时，它会引发错误。

const [order, setOrder] = useState(null)

在此组件的 props 中使用它之前，您需要添加一个检查以确保 order 不为 null 或给定默认值：

<MapViewDirections
     origin={origin}
      destination={{
        latitude: order.originLatitude,
        longitude: order.originLongitude
      }}
      apikey={GOOGLE_MAPS_APIKEY}
/>