javascript - 单击MapView.Callout后显示模态-无法更新状态问题(Displaying Modal after clicking on MapView.Callout - cannot update state issue)

Question

I am totally beginner in react-native.

(我完全是反应母语的初学者。)

I want to display Modal after click on MapView.Marker.InfoWindow.

(我想在单击MapView.Marker.InfoWindow后显示Modal。)

I am fetching data from Firebase and updating state accordingly.

(我正在从Firebase提取数据并相应地更新状态。)

I am getting this issue:

(我收到此问题：)

Warning: Cannot update during an existing state transition (such as within 'render').

(警告：在现有状态转换期间（例如在“渲染”中）无法更新。)

Can someone please advice?

(有人可以请教吗？)

How can I trigger Modal to display, without updating state?

(如何触发Modal显示而不更新状态？)

As i understand this causing the issue?

(据我了解，这导致了问题？)

Here is my code below:

(这是我的代码如下：)

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      region: {
        latitude: 43.768009,
        longitude: 11.253165,
        latitudeDelta: 0.043,
        longitudeDelta: 0.034
      },
      placesList : [],
      loading: true,
      activeModal: null,
    }

  componentDidMount() {
    this.getPlaces();
  }

  getPlaces(){
    let placesRef = db.collection('places');
    placesRef.get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.setState({
            placesList: [
              ...this.state.placesList,
              doc.data()
            ],
            loading: false,
          })
        });
      })
      .catch((err) => {
        console.log('Error getting documents', err);
      });

  }

 renderModal() {
    const activeModal = this.state.activeModal;
    if (!activeModal) return null;

    return (
      <Modal
        isVisible
        useNativeDriver
        style={{margin: 0, justifyContent: 'fex-end'}}
        backdropColor={'#C1BEC0'}
        onBackButtonPress={this.setState({activeModal: null})}
        onBackdropPress={this.setState({activeModal: null})}
        onSwipeComplete={this.setState({activeModal: null})}
      >
        <View style={styles.modal}>
          <View>
            <Text style={{fontSize: 24}}>
              {activeModal.name}
            </Text>
          </View>
          <View style={{ paddingVertical: 12 }}>
            <Text style={{ color: "#7D818A", fontSize: 18 }}>
              {activeModal.address}
            </Text>
          </View>
          <View style={styles.modalInfo}>
            <Icon
                name="ios-images"
                type='ionicon'/>
          </View>
          <View>
            <TouchableOpacity
              onPress={this._onPressBackButton}
              style={styles.backBtn}>
              <Text style={{fontWeight: '600', fontSize: 18, color: "#fff"}}>
                Back to map
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }
render() {
    return this.state.loading ? (
      null
    ) : (
      <View style={styles.container}>
        <View>
           <StatusBar barStyle="dark-content"/>
         </View>
        {this.renderHeader()}
        <MapView style={styles.mapStyle}
          provider = {MapView.PROVIDER_GOOGLE}
          showsUserLocation={true}
          customMapStyle={mapStyle}
          minZoomLevel={15}
          maxZoomLevel={20}
          showsCompass={true}
          rotateEnabled={false}
          initialRegion={this.state.region}
        >
          {console.log(this.state.placesList)}
          {this.state.placesList[0] != null && this.state.placesList.map((marker, index) => (
            <MapView.Marker.Animated
              key = {index}
              coordinate = {{
                latitude: marker.location._lat,
                longitude: marker.location._long,
              }}
              title = { marker.name }
            >
            <MapView.Callout
              onPress={() => this.setState({ activeModal: marker})}>
              <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
              <Text style={styles.text}>{marker.name}</Text>
              <Text>{marker.address}</Text>
              </View>
            </MapView.Callout>
            </MapView.Marker.Animated>
          ))}
        </MapView>
        {this.renderModal()}
      </View>
    );
  }
}

  ask by bdnrco translate from so

Answer 1

等待大神答复