useEffect 崩溃反应本机

Question

how can I fix these problems and run the app without errors. PS: I tried to adopt the app on other views with the same code and the code is working.

Console Warning

Code:

import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableHighlight
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import * as Location from 'expo-location';
import MapView, { Marker } from 'react-native-maps';
import { colors, device, fonts, gStyle } from '../constants';
import RequestRideType from '../components/RequestRideType';
import SelectRideType from '../components/SelectRideType';
import TouchIcon from '../components/TouchIcon';
import TouchText from '../components/TouchText';
import WhereTo from '../components/WhereTo';
import SvgCheckShield from '../components/icons/Svg.CheckShield';
import SvgMenu from '../components/icons/Svg.Menu';
import SvgQRCode from '../components/icons/Svg.QRCode';
import { getlist } from '../services/event';

const { PROVIDER_GOOGLE } = MapView;

export const types = {
  car: {
    image: 'carSm',
    imageLg: 'carLg',
    text: 'Soccer'
  },
  bike: {
    image: 'bikeSm',
    imageLg: 'bikeLg',
    text: 'Basket'
  },
  golf: {
    image: 'golfSm',
    imageLg: 'golfLg',
    text: 'Golf'
  },
  baseball: {
    image: 'golfSm',
    imageLg: 'golfLg',
    text: 'Baseball'
  }
};

export function HomeLoad(props) {
  const [Activity, setlistActivity] = useState([]);
  const load = async () => {
    if (Activity.length === 0) {
      const list = await getlist();
      setlistActivity(list);
    }
  };
  useEffect(() => {
    load();
  });

  return <Home eventlist={Activity} props={props} />;
}

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'car',
      selectType: false,
      showMap: false,
      userLat: null,
      userLon: null
    };

    this.toggleTypeModal = this.toggleTypeModal.bind(this);
    this.changeRideType = this.changeRideType.bind(this);
  }

  async componentDidMount() {
    // Check location permession
    const { status: existingStatus } =
      await Location.requestForegroundPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Location.requestForegroundPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      return;
    }
    // Load Position of user
    const { coords } = await Location.getCurrentPositionAsync();
    this.setState({
      showMap: true,
      userLat: coords.latitude,
      userLon: coords.longitude
    });
  }

  toggleTypeModal() {
    this.setState((prevState) => ({
      selectType: !prevState.selectType
    }));
  }

  changeRideType(type) {
    this.setState({
      type
    });
  }

  render() {
    const { eventlist } = this.props;
    const { navigation } = this.props.props;
    const { type, selectType, showMap, userLat, userLon } = this.state;
    return (
      <View style={gStyle.container}>
        {showMap && (
          <React.Fragment>
            <MapView
              followsUserLocation
              minZoomLevel={4}
              pitchEnabled
              rotateEnabled
              zoomEnabled
              scrollEnabled
              provider={PROVIDER_GOOGLE}
              region={{
                latitude: userLat,
                longitude: userLon,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
              }}
              showsUserLocation
              style={styles.map}
            >
              {eventlist.length > 0
                ? eventlist.map((objectvalue) => (
                    <Marker
                      key={Math.random()}
                      coordinate={{
                        latitude: objectvalue.latitudine
                          ? objectvalue.latitudine
                          : this.state.userLat,
                        longitude: objectvalue.longitudine
                          ? objectvalue.longitudine
                          : this.state.userLon
                      }}
                    >
                      <View style={styles.circle}>
                        <Text style={styles.pinText}>
                          {objectvalue.SportType === 'Golf' ? (
                            <Image
                              style={stylesMarker.tinyLogo}
                              source={require('../assets/images/golf-lg.jpg')}
                            />
                          ) : objectvalue.SportType === 'Soccer' ? (
                            <Image
                              style={stylesMarker.tinyLogo}
                              source={require('../assets/images/soccer.png')}
                            />
                          ) : objectvalue.SportType === 'Baseball' ? (
                            <Image
                              style={stylesMarker.tinyLogo}
                              source={require('../assets/images/baseball.jpg')}
                            />
                          ) : (
                            <Image
                              style={stylesMarker.tinyLogo}
                              source={require('../assets/images/basket.png')}
                            />
                          )}
                        </Text>
                      </View>
                    </Marker>
                  ))
                : console.log('non ci sono eventi')}
            </MapView>
          </React.Fragment>
        )}

        {!showMap && (
          <View style={styles.containerNoLocation}>
            <Text style={styles.textLocationNeeded}>Search Fit Event...</Text>
            <TouchText
              // eslint-disable-next-line no-undef
              onPress={() => Linking.openURL('app-settings:')}
              style={styles.btnGoTo}
              styleText={styles.btnGoToText}
              text="Go To Permissions"
            />
          </View>
        )}

        {type === 'bike' && (
          <View style={styles.rightContainer}>
            <View style={styles.icon}>
              <TouchIcon
                icon={<SvgQRCode />}
                iconSize={20}
                onPress={() => navigation.navigate('ModalQRCode')}
                style={[styles.icon, styles.iconQRCode]}
              />
              <TouchIcon
                icon={<SvgCheckShield />}
                iconSize={20}
                onPress={() => navigation.navigate('ModalTutorialBike')}
                style={[styles.icon, styles.iconShield]}
              />
            </View>
          </View>
        )}

        <View style={styles.header}>
          <TouchIcon
            icon={<SvgMenu />}
            iconSize={32}
            onPress={() => navigation.toggleDrawer()}
          />
          <RequestRideType
            image={types[type].image}
            onPress={this.toggleTypeModal}
            text={types[type].text}
          />

          {type === 'car' && <View style={styles.placeholder} />}
          {type === 'bike' && (
            <TouchText
              onPress={() => navigation.navigate('ModalHelp')}
              style={styles.help}
              text="Info"
            />
          )}
        </View>

        <SelectRideType
          data={types}
          onClose={this.toggleTypeModal}
          onSelect={this.changeRideType}
          visible={selectType}
        />

        <WhereTo />
        <View style={styles.mainConatinerStyle} />
        <TouchableHighlight onPress={() => Actions.addactivity()}>
          <Image
            onPress={() => Actions.addactivity()}
            style={styles.image}
            source={require('../assets/images/add.png')}
          />
        </TouchableHighlight>
      </View>
    );
  }
}

const stylesMarker = StyleSheet.create({
  container: {
    paddingTop: 50
  },
  tinyLogo: {
    height: 50,
    width: 50
  },
  logo: {
    height: 58,
    width: 66
  }
});
const styles = StyleSheet.create({
  mainConatinerStyle: {
    flexDirection: 'row',
    flex: 1
  },
  image: {
    display: 'flex',
    flexDirection: 'row',
    height: 50,
    justifyContent: 'space-between',
    marginBottom: 10,
    marginLeft: 30,
    width: 50
  },
  floatingMenuButtonStyle: {
    alignSelf: 'flex-end',
    bottom: 35,
    position: 'absolute'
  },
  circle: {
    backgroundColor: 'red',
    borderRadius: 30 / 2,
    height: 30,
    width: 30
  },
  pinText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center'
  },
  map: {
    flex: 1,
    height: device.height,
    position: 'absolute',
    width: device.width
  },
  containerNoLocation: {
    alignItems: 'center',
    height: device.height,
    justifyContent: 'center',
    position: 'absolute',
    width: device.width
  },
  textLocationNeeded: {
    fontFamily: fonts.uberMedium,
    fontSize: 16,
    marginBottom: 16
  },
  btnGoTo: {
    backgroundColor: colors.black,
    borderRadius: 3,
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  btnGoToText: {
    color: colors.white,
    fontFamily: fonts.uberMedium,
    fontSize: 16
  },
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    paddingHorizontal: 20,
    paddingTop: device.iPhoneX ? 58 : 34
  },
  help: {
    textAlign: 'center',
    width: 32
  },
  placeholder: {
    height: 32,
    width: 32
  },
  rightContainer: {
    alignItems: 'center',
    height: '100%',
    justifyContent: 'center',
    position: 'absolute',
    right: 16,
    width: 40
  },
  icon: {
    borderRadius: 18,
    height: 36,
    shadowColor: colors.black,
    shadowOffset: { height: 2, width: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    width: 36
  },
  iconQRCode: {
    backgroundColor: colors.blue,
    marginBottom: 16
  },
  iconShield: {
    backgroundColor: colors.white
  }
});

export default Home;

Answer 1

This is a problem of one of your dependencies, and should be solved by the authors after they update it.

As a temporary solution, you can simply ignore the logs:

Create a file named ignoreWarns.js in the root directory of your project, it should contain:

import { LogBox } from "react-native";

if (__DEV__) {
  const ignoreWarns = [
    "EventEmitter.removeListener",
    "[fuego-swr-keys-from-collection-path]",
    "Setting a timer for a long period of time",
    "ViewPropTypes will be removed from React Native",
    "AsyncStorage has been extracted from react-native",
    "exported from 'deprecated-react-native-prop-types'.",
    "Non-serializable values were found in the navigation state.",
    "VirtualizedLists should never be nested inside plain ScrollViews",
  ];

  const warn = console.warn;
  console.warn = (...arg) => {
    for (const warning of ignoreWarns) {
      if (arg[0].startsWith(warning)) {
        return;
      }
    }
    warn(...arg);
  };

  LogBox.ignoreLogs(ignoreWarns);
}

Now import the file in at the top of every other file you have.

Answer 2

You're missing the dependency array in useEffect that's why it's running infinite times and crashing the app. Please add the empty array in useEffect .

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