反应映射:如何添加标记，而不重新介绍整个地图

Question

我正在构建一张地图，该地图显示标记以显示附近商人的位置。我将"数据"数组作为道具传递给地图。我设置了一个间隔，以至于每两秒钟，我从API中获取更多商人，而"数据"阵列会增长。

我正在获取ComponentWillReceiveProps中的数据。FetchData（）将更多的商人附加到数据阵列中。

componentWillReceiveProps(nextProps) {
    if(nextProps.loading == false) {
        setTimeout(nextProps.fetchData,2000);
    }

以及我的MapView组件 -

{
    this.props.data.length > 0 && this.props.data.map(merchant => (
        <MapView.Marker
            coordinate={{latitude: Number(merchant.latitude), longitude: Number(merchant.longitude)}}
            title={merchant.name}
            description={merchant.address}
            identifier={"" + merchant.id}
            key={merchant.id}
        />
    ))
}

我的问题：每当我调用fetchdata（）时，就会呈现新标记。但是，整个地图再次呈现。我不希望这种眨眼的行为。

我非常感谢任何帮助/建议。预先感谢！

P.S。您可以在此处找到视觉

Answer 1

您可以使用自定义类组件而不是MapView.marker，然后使用componentShouldUpdate()函数指定标记是否需要在某些条件下进行更新。