Question

我正在使用MapView，并希望在地图上显示一些标记。由于我使用console.log进行检查，但我收到的带有道具的列表可以正常显示，但地图何时更新并保持其旧状态。当我第二次渲染时，它会被更新。为什么会这样。列表数组已正确接收，但MapView Component在第二次渲染后更新。我不知道列表出现时如何更新组件。

例如：当列表带有3个标记（使用console.log）时，地图将显示0个标记，并且在再次渲染后将显示3个标记。该组件始终落后一步

import { Image, Text, StyleSheet, ScrollView, View, TouchableOpacity, ActivityIndicator } from 'react-native';


export default class MapComponent extends Component {
  constructor(props) {
    super(props);
  }


render() {

      console.log(this.props.list)

      let position=null
       position = this.props.list.map((maps, key) =>{
        var latitudine = parseFloat(maps.latitudine);
        var longitudine = parseFloat(maps.longitudine);
        return (
          <Marker key={key} coordinate={{ latitude: latitudine, longitude: longitudine }} cluster={true}>
            <Image source={require('../../../assets/png/posizione_mappa.png')} style={{ height: 60, width: 60 }} />
          </Marker>
        )
      }) 



      return (
           <View>
          <MapView
            provider={PROVIDER_GOOGLE}
            clustering={true}
            clusterColor='#db432b'
            clusterTextColor='white'
            clusterBorderColor='#f29485'
            clusterBorderWidth={10}
            showsUserLocation={true}
            customMapStyle={mapStyle}
            showsMyLocationButton={false}
            style={styles.map}
          >
          {position}
          </MapView>
      );
    }
  }
}

Answer 1

这可能是由于您的list道具引用没有随着更改而更新的事实。例如如果您已使用redux connect将此数据附加到组件，则需要类似

const mapStateToProps = state => (
  {
    list: [...state.someReducer.list]
  }
)
connect(mapStateToProps)(YourComponent);

或者，如果您要从父组件传递此道具，请确保未对数据进行突变。对该列表中的每个更改都传递新的参考

数组的元素显示在第二个渲染器上

1 个答案: