即使设置为 false，使用条件渲染的 React Native 仍然尝试访问状态

Question

我正在尝试呈现一个组件，但只有在我收到服务器的响应之后。出于某种原因，即使条件仍然为 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,
    },
   });

错误：

ypeError: Cannot read property '0' of undefined

This error is located at:
    in Map (created by ConnectFunction)
    in ConnectFunction (at SceneView.tsx:122)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in Unknown (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in Unknown (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in Unknown (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:573)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:544)
    in RCTView (at View.js:34)
    in Unknown (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:619)
    in RCTView (at View.js:34)
    in Unknown (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:612)
    in RCTView (at View.js:34)
    in Unknown (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:494)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in Unknown (at GestureHandlerRootView.android.js:26)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at JoinStack.js:18)
    in JoinStackScreen (at SceneView.tsx:122)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in Unknown (at BottomTabView.tsx:55)
    in SceneContent (at BottomTabView.tsx:172)
    in RCTView (at View.js:34)
    in Unknown (at ResourceSavingScene.tsx:58)
    in RCTView (at View.js:34)
    in Unknown (at ResourceSavingScene.tsx:41)
    in ResourceSavingScene (at BottomTabView.tsx:166)
    in RCTView (at View.js:34)
    in Unknown (at src/index.native.js:123)
    in ScreenContainer (at BottomTabView.tsx:146)
    in RCTView (at View.js:34)
    in Unknown (at BottomTabView.tsx:145)
    in SafeAreaProviderCompat (at BottomTabView.tsx:144)
    in BottomTabView (at createBottomTabNavigator.tsx:45)
    in BottomTabNavigator (at UserTabNavigator.js:29)
    in MainTabNavigator (created by ConnectFunction)
    in ConnectFunction (at SceneView.tsx:122)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in Unknown (at ResourceSavingScene.tsx:58)
    in RCTView (at View.js:34)
    in Unknown (at ResourceSavingScene.tsx:41)
    in ResourceSavingScene (at DrawerView.tsx:183)
    in RCTView (at View.js:34)
    in Unknown (at src/index.native.js:123)
    in ScreenContainer (at DrawerView.tsx:162)
    in RCTView (at View.js:34)
    in Unknown (at Drawer.tsx:645)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:638)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:628)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Drawer.tsx:619)
    in DrawerView (at DrawerView.tsx:215)
    in SafeAreaProviderCompat (at DrawerView.tsx:213)
    in RCTView (at View.js:34)
    in Unknown (at GestureHandlerRootView.android.js:26)
    in GestureHandlerRootView (at DrawerView.tsx:212)
    in DrawerView (at createDrawerNavigator.tsx:47)
    in DrawerNavigator (at DrawerNavigator.js:27)
    in MyDrawer (created by ConnectFunction)
    in ConnectFunction (at SceneView.tsx:122)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in Unknown (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in Unknown (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in Unknown (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:573)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in Unknown (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at Card.tsx:544)
    in RCTView (at View.js:34)
    in Unknown (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:619)
    in RCTView (at View.js:34)
    in Unknown (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:612)
    in RCTView (at View.js:34)
    in Unknown (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:494)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at routes/index.js:29)
    in AppMainRouter (created by ConnectFunction)
    in ConnectFunction
    in MainNavigation (at App.js:31)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in BaseNavigationContainer (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in NavigationContainer (at App.js:26)
    in Provider (at App.js:25)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in Unknown (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in Unknown (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

当我尝试访问路径时，从模拟器看来错误出现在第 72 行 (latitude: path ? path[0][0] : 0)。

如果我删除 Map 并放置一个按钮来打印路径变量，我会得到一个数组数组，应该可以像我那样访问它。我构建组件和 API 调用的方式有问题吗？

更新：

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

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

Answer 1

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

const [loader, setLoader] = useState(true)

因为 useEffect 以 componentDidMount 的方式工作，就像您使用的方式一样，这意味着最初它将呈现组件，然后调用 useEffect.

有用 link : https://medium.com/@felippenardi/how-to-do-componentdidmount-with-react-hooks-553ba39d1571#:~:text=Functions%20passed%20to%20useEffect%20are,executing%20on%20the%20first%20rendering.

即使设置为 false，使用条件渲染的 React Native 仍然尝试访问状态

React Native using conditional rendering still trying to access state even though set to false

api

conditional-rendering

react-native