React native 使用条件呈现进行本机反应，即使设置为false，仍尝试访问状态

我试图呈现一个组件，但只有在从服务器得到响应之后。 由于某些原因，即使条件仍然为false，react看起来仍在尝试装载组件

我试图在访问阵列之前添加一些预检查，但错误仍然存在。见下面的代码：

MyComponent.js

import React, { useEffect, useState } from 'react'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
import {StyleSheet, View, Text} from 'react-native'
import { Dimensions } from 'react-native';
import { Marker } from 'react-native-maps';
import { getCarpoolByCode } from '../../services/CarpoolRidesService';
import { connect } from 'react-redux';
import SimpleSpinner from '../global/SimpleSpinner';
import { TouchableOpacity } from 'react-native-gesture-handler';
import MapViewDirections from 'react-native-maps-directions';

const GOOGLE_MAPS_APIKEY = '...';

const Map = ({
    route,carpoolCode,token
}) => {

    const [markers, setMarkers] = useState([])
    const [loader, setLoader] = useState(false)
    const [path, setPath] = useState([])
    const [source, setSource] = useState([])
    const [dest, setDest] = useState([])

    useEffect(() => {
        setLoader(true)
        console.log(token)
        console.log(route.params?.carpoolCode)
        getCarpoolByCode(token, route.params?.carpoolCode)
            .then(res => {
                console.log("MapPPPPPPPPPP")
                console.log(res)
                setSource(res.source)
                setDest(res.destination)
                setPath(
                    [
                        res.source,
                        ...res.path,
                        res.destination
                    ]
                )
                setLoader(false)
            })
            .catch(err => {
                console.log(err)
                setLoader(false)
            })
        // console.log(route.params)
        // setLoader(true)
        // setMarkers(route.params.results.map(it => it.carpoolData))
        // setLoader(false)
    },[])

    return (

        <>
                {
                    loader ? 
                    <SimpleSpinner/>
                    :
                    <View style={styles.container}>

                        {/* <TouchableOpacity onPress={() => console.log(path)} style={{flex:1}}>
                            <Text>sadas</Text>

                        </TouchableOpacity> */}


                    <MapView
                    provider={PROVIDER_GOOGLE} 
                    style={styles.map}
                    region={{
                        latitude:  path ? path[0][0] : 0,
                        longitude: path ? path[0][1] : 0,
                        latitudeDelta: 0.015,
                        longitudeDelta: 0.0121,
                    }}
                    showsUserLocation={true}
                    > 
                    <MapViewDirections
                        origin={source ? {latitude: source[0], longitude: source[0]} : {latitude: 32.162413, longitude: 34.844675}}
                        destination={dest ? {latitude: dest[0], longitude: dest[1]} : {latitude: 32.162413, longitude: 34.844675}}
                        apikey={GOOGLE_MAPS_APIKEY}
                    />
                         {path.map((marker, index) => 
                         {
            
                            console.log("marker")
                            console.log(marker)
            
                         return (
                            <Marker
                            key={index}
                            coordinate={{ latitude : marker[0] , longitude : marker[1] }}
                            // title={marker.title}
                            // description={marker.description}
                            />
                        )
                         }
                        )}

                   
                    </MapView>
                </View>
                }
        </>
       
    );
}

function mapStateToProps(state) {
    return {
      token: state.users.user.login.token
    };
  }
  

  
  export default connect(mapStateToProps, null)(Map)

const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      height: Dimensions.get('window').height,
      width: Dimensions.get('window').width,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
   });

从模拟器上看，当我试图访问路径时，错误似乎出现在第72行（纬度：路径？路径[0][0]：0）

如果我移除映射并按下按钮打印path变量，我会得到一个数组数组，它应该可以像我那样访问。 我构建组件和API调用的方式是否有问题

更新：

我也遇到了源和目标的问题。 当我将源从一个数组更改为2个独立的双精度（srcLat和srcLng）时，它似乎没有问题

---

我能想到的唯一一件事是数组是对内容的引用，因此它可能会产生问题，但是，条件设置为false，因此很奇怪。

将加载程序的初始状态设置为true

const [loader, setLoader] = useState(true)

因为

useffect

按照您使用的方式作为

componentDidMount

工作，这意味着最初它将呈现组件，然后调用

useffect

有用的链接：。

谢谢，它现在正在工作：）我到现在还没有考虑过，我想我在其他地方也会有这个bug。

const [loader, setLoader] = useState(true)