数组的元素在第二次渲染时显示
数组的元素在第二次渲染时显示
提问于 2019-05-20 01:25:34
我正在使用MapView，想在地图上显示一些标记。我收到的带有道具的列表可以正常到达，因为我使用console.log进行检查，但是地图在什么时候没有更新，并且保持它的旧状态。当我第二次渲染时，它就会更新。为什么会发生这种情况。列表数组被正确接收，但MapView组件在第二次呈现后更新。我不知道如何才能在列表出现时更新组件。
例如:当列表带有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>
);
}
}
}回答 1
Stack Overflow用户
发布于 2019-05-20 01:32:23
这可能是因为您的list属性引用没有在更改时更新。例如，如果您已经使用redux connect将此数据附加到组件，则需要这样做
const mapStateToProps = state => (
{
list: [...state.someReducer.list]
}
)
connect(mapStateToProps)(YourComponent);
或者，如果您从父组件传递此属性，请确保数据不会发生变化。对此列表中的每个更改传递一个新引用
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56210306
复制相关文章
相似问题