Question

我最近在IOS上测试了我的react native应用，发现一个奇怪的错误：我的setState调用之一不更新我的状态，并且我检查了其他所有内容是否正确。

我正在研究房地产销售应用程序。这个setState的目的是，当用户单击标记时，在地图上显示带有详细信息被单击的遗产的框。因此，当用户单击时，它会获取所单击的遗产的索引，并用它填充状态var currentEstate。

此外，它仅出现在IO上，在Android上一切正常，有任何想法吗？

这是代码：

我的切换遗产函数，其中包含setState

  _toggleEstate(index, coords) {
    // This is what i want to put in my currentEstate, and it's not empty
    console.log(this.state.estates[index]);

    this.setState(
      {
        currentEstate: this.state.estates[index]
      },
      function() {
        // But this is empty, so the setState didn't work
        console.log(this.state.currentEstate);
      }
    );

    var newRegion = {
      latitude: coords.latitude,
      longitude: coords.longitude,
      latitudeDelta: 0.00522,
      longitudeDelta: 0.0221
    };

    this.mapRef.animateToRegion(newRegion, 500);
  }

我的renderEstate函数，它检查currentEstate是否为空，如果不是，则返回JSX组件：

  _renderEstateItem() {
    if (this._isEmpty(this.state.currentEstate)) {
      return null;
    } else {
      return (
        <View style={styles.estateContainer}>
          <EstateItem
            estate={this.state.currentEstate}
            displayDetailForEstate={this._displayDetailForEstate}
            showImage={false}
          />
        </View>
      );
    }
  }

还有我的JSX组件：

  render() {
    return (
      <View style={styles.mainContainer}>
        <MapView
          initialRegion={{
            latitude: 48.8691526048,
            longitude: 2.352065575453187,
            latitudeDelta: 0.1922,
            longitudeDelta: 0.0421
          }}
          ref={ref => {
            this.mapRef = ref;
          }}
          onPress={() => this._clickOnMap()}
          style={{ flex: 1 }}
        >
          {this.state.markers.map((marker, index) => {
            const coords = {
              latitude: marker.lat,
              longitude: marker.lng
            };

            return (
              <MapView.Marker
                key={index}
                coordinate={coords}
                title={this.state.estates[index].adress}
                description={
                  numeral(this.state.estates[index].price)
                    .format("0,0")
                    .replace(",", " ") + "€"
                }
                pinColor={color.electricViolet}
                onPress={() => this._toggleEstate(index, coords)}
              />
            );
          })}
        </MapView>
        <TouchableOpacity
          onPress={() => this._goToList()}
          style={
            this._isEmpty(this.state.currentEstate)
              ? styles.listButton
              : styles.listButtonUp
          }
        >
          <Image
            style={styles.listIcon}
            resizeMode="contain"
            source={require("../assets/images/purple_icons/List.png")}
          />
        </TouchableOpacity>

        // Here it is when it's suppose to render
        {this._renderEstateItem()}


        {this._displayLoading()}
      </View>
    );
  }

最后是构造函数：

  constructor(props) {
    super(props);
    this.mapRef = null;

    this.myResearch = this.props.navigation.state.params.myResearch;

    this.state = {
      isLoading: false,
      estates: [],
      markers: [],
      currentEstate: []
    };

    Geocoder.init(constants.GOOGLE_MAPS_API);

    this._displayDetailForEstate = this._displayDetailForEstate.bind(this);
  }

谢谢！

Answer 1

您必须使用arrow functions。

例如更改

_toggleEstate(index, coords) {
    console.log(this.state.estates[index]);

    this.setState(
      {
        currentEstate: this.state.estates[index]
      },
      function() {
        console.log(this.state.currentEstate);
      }
    );
}

收件人：

// HERE
_toggleEstate = (index, coords) => {
    console.log(this.state.estates[index]);

    this.setState(
      {
        currentEstate: this.state.estates[index]
      },
      () => { // AND HERE
        console.log(this.state.currentEstate);
      }
    );
}

您必须将回调更改为箭头函数格式。

我的setState函数在IOS上不起作用

1 个答案: