useEffect 崩溃反应本机

Question

我怎样才能解决这些问题并运行该应用程序而不会出现错误。 PS：我尝试在具有相同代码的其他视图上采用该应用程序并且该代码正在运行。

控制台警告

代码：

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

这是您的依赖项之一的问题，作者应在更新后解决。

作为临时解决方案，您可以简单地忽略日志：

在项目的根目录中创建一个名为ignoreWarns.js的文件，它应该包含：

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);
}

现在将文件导入到您拥有的所有其他文件的顶部。

Answer 2

您在useEffect中缺少依赖数组，这就是它无限次运行并使应用程序崩溃的原因。 请在useEffect中添加空数组。

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