数组的元素在第二次渲染时显示答案

【问题标题】：array's elements display on second render数组的元素在第二次渲染时显示
【发布时间】：2019-10-06 04:42:48
【问题描述】：

我正在使用 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>
      );
    }
  }
}

【问题讨论】：

this.props.list 开始时为空（在父级加载数据期间）？ console.log 长度 - 相当父问题

标签： javascript arrays reactjs react-native jsx

【解决方案1】：

这可能是因为您的 list 道具参考没有在更改时更新。例如如果您已使用 redux connect 将此数据附加到组件，那么您需要类似

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

或者，如果您从父组件传递此道具，请确保数据没有被改变。对此列表中的每个更改都传递一个新的引用

【讨论】：

感谢您的回复。我收到的带有道具的清单没问题。我已经更新了解释以更好地解释我的情况。如果你能帮助我，请看看。