Question

当我运行由react-native init创建的react native应用时，会收到以下警告：

YellowBox.js:71 Warning: componentWillUpdate is deprecated and will be removed in the next major version. Use componentDidUpdate instead. 
As a temporary workaround, you can rename to UNSAFE_componentWillUpdate.

Please update the following components: MapView

但是，我没有在componentWillUpdate或代码的其他任何地方使用MapView。

import React, { Component } from "react";
import { View, Platform, TextInput, Dimensions } from "react-native";
import { Button } from "react-native-elements";
import { connect } from "react-redux";
import {
  getLocation,
  setCurrentRegion
} from "../redux/actions/locationActions";
import { setCurrentStationID } from "../redux/actions/stationActions";
import AutoFillMapSearch from "../subviews/AutoFillMapSearch";
import StationMarkers from "../subviews/StationMarkers";
import LoadingIndicator from "../components/LoadingIndicator";
// import Icon from "react-native-vector-icons/FontAwesome";
import { Icon } from "react-native-elements";

import MapView, { Marker, Callout } from "react-native-maps";

class MapScreen extends Component {
  static navigationOptions = {
    title: "Nearby Stations"
  };

  state = { region: null };

  componentDidMount = () => {
    this.props.getLocation();
  };

  goToCupertino = () => {
    this.props.setCurrentRegion({
      latitude: 37.33233141,
      longitude: -122.0312186,
      accuracy: 0.05,
      showMarker: true
    });
  };

  onMarkerPress = station => {
    this.setState({
      region: { ...this.props.currentRegion, ...station.location }
    });
  };

  onCalloutPress = station => {
    this.props.setCurrentStationID(station.id);
    this.props.navigation.navigate("StationDetail", {
      title: station.title
    });
  };

  beforePressPrediction = async () => {
    await this.setState({ region: null });
  };

  render() {
    // console.log("MapView", this.props.currentRegion);

    return (
      <View style={styles.container}>
        <LoadingIndicator
          message={"Loading Stations..."}
          isVisible={this.props.isLoading}
        />
        <MapView
          // provider={MapView.PROVIDER_GOOGLE}
          style={{ flex: 1 }}
          region={this.props.currentRegion}
          showsUserLocation={true}
        >
          <StationMarkers
            stations={this.props.stations}
            onCalloutPress={this.onCalloutPress.bind(this)}
          />
          <CurrentRegionMarker currentRegion={this.props.currentRegion} />
        </MapView>
        <Callout style={styles.searchCallout}>
          <AutoFillMapSearch
            style={styles.calloutSearch}
            beforeOnPress={this.beforePressPrediction.bind(this)}
          />
        </Callout>
        {__DEV__ && <CupertinoButton onPress={this.goToCupertino.bind(this)} />}
        <LocationButton onPress={this.props.getLocation} />
      </View>
    );
  }
}

const LocationButton = ({ onPress }) => {
  return (
    // callout can't have borderRadius in android
    <Callout style={styles.locationButtonCallout}>
      <Button
        buttonStyle={styles.locationButton}
        onPress={onPress}
        icon={
          <Icon
            name="location-arrow"
            type="font-awesome"
            color="#3B6EC2"
            size={20}
          />
        }
      />
    </Callout>
  );
};

const CurrentRegionMarker = ({ currentRegion }) => {
  return currentRegion && currentRegion.showMarker ? (
    <Marker coordinate={currentRegion} pinColor={"green"} />
  ) : null;
};

const CupertinoButton = props => (
  <Callout style={[styles.locationButtonCallout, { right: 60, width: null }]}>
    <Button onPress={props.onPress} title={"Cupertino"} />
  </Callout>
);

const mapStateToProps = ({ main, location }) => ({
  stations: main.stations,
  currentRegion: location.currentRegion,
  isLoading: main.isLoading
});

export default connect(
  mapStateToProps,
  {
    getLocation,
    setCurrentRegion,
    setCurrentStationID
  }
)(MapScreen);

关于错误的堆栈跟踪中没有MapView或我的任何文件：

VM165:1 console.trace
(anonymous) @   VM165:1
printWarning    @   ReactNativeRenderer-dev.js:6435
lowPriorityWarning  @   ReactNativeRenderer-dev.js:6457
ReactStrictModeWarnings.flushPendingDeprecationWarnings @   ReactNativeRenderer-dev.js:6623
flushRenderPhaseStrictModeWarningsInDEV @   ReactNativeRenderer-dev.js:18529
commitRootImpl  @   ReactNativeRenderer-dev.js:17863
unstable_runWithPriority    @   scheduler.development.js:471
runWithPriority @   ReactNativeRenderer-dev.js:5532
commitRoot  @   ReactNativeRenderer-dev.js:17845
runRootCallback @   ReactNativeRenderer-dev.js:17218
flushImmediateQueueImpl @   ReactNativeRenderer-dev.js:5581
flushImmediateQueue @   ReactNativeRenderer-dev.js:5568
scheduleUpdateOnFiber   @   ReactNativeRenderer-dev.js:17073
scheduleRootUpdate  @   ReactNativeRenderer-dev.js:18938
updateContainerAtExpirationTime @   ReactNativeRenderer-dev.js:18972
updateContainer @   ReactNativeRenderer-dev.js:19075
render  @   ReactNativeRenderer-dev.js:20086
renderApplication   @   renderApplication.js:67
run @   AppRegistry.js:113
runApplication  @   AppRegistry.js:213
__callFunction  @   MessageQueue.js:395
(anonymous) @   MessageQueue.js:106
__guard @   MessageQueue.js:343
callFunctionReturnFlushedQueue  @   MessageQueue.js:105
(anonymous) @   debuggerWorker.js:80

我禁用了YellowBox，但是它仍然显示在调试器控制台中，这很烦人。

Answer 1

您使用的react-redux是哪个版本？我怀疑您使用的是旧版API，因此最终的connect版MapScreen组件使用componentWillUpdate。 react-redux的最新版本（我相信是6.x及更高版本）与React 16 API兼容，因此我建议您进行更新，看看是否可以清除错误。

Answer 2

问题不在您身边，库react-native-maps的维护者可能在其代码内使用了componentWillUpdate。您必须等待新的程序包更新，或者手动更改node_modules文件夹中的文件。

编辑。

从此链接看来，该库已被更新为不使用componentWillUpdate：https://github.com/react-native-community/react-native-maps/commit/5735436b8a60b77cbb3dba1cbd300d48414e0ee2#diff-abee936d24c1f55847804d4b90e53ae2

尝试更新库，方法是：npm update react-native-maps

错误的componentWillUpdate警告

2 个答案: