坐标更改后自定义标记不重新渲染

Posted 2023-03-28

【中文标题】坐标更改后自定义标记不重新渲染

【英文标题】：Custom marker not rerendering after coordinates change

【发布时间】：2020-12-11 16:49:48

【问题描述】：

我正在尝试在地图上移动一些标记，但是在更新包含有关它们的坐标信息的数组后，没有任何反应，它只是在闪烁，但没有移动。

BusMarker.js（客户标记）

import React,  useState, useEffect  from 'react'
import  Marker  from 'react-native-maps'

const BusMarker = props => 
  const  longitude, latitude, plate  = props

  const [coordinates] = useState(
    longitude: Number(longitude),
    latitude: Number(latitude)
  )

  return (
    <Marker
      key=`bus-$plate-$new Date().getMilliseconds()`
      coordinate=coordinates
      image=require('../../img/icon/bus-icon.png')>
    </Marker>
  )


export default BusMarker

Map.js

import React,  useState, useEffect, Fragment, useCallback, useRef  from 'react'
import  StyleSheet, View, Text  from 'react-native'
import  useSelector, useDispatch  from 'react-redux'
import MapView,  PROVIDER_GOOGLE from 'react-native-maps'
import BusMarker from './BusMarker'
import  useFocusEffect  from 'react-navigation-hooks'

const Maps = () => 
  const [busLocation, setBusLocation] = useState([
    
      "plate": "CAR1203",
      "latitude": 0,
      "longitude": 0,
    ,
  ])

  const [region] = useState(
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.0143,
    longitudeDelta: 0.0134,
  )

  const _renderBusesOnMap = busLocation => 
    if (busLocation.length > 0) 
      return busLocation.map(( plate, longitude, latitude ) => 
        return (
          <BusMarker key=plate plate=plate longitude=longitude latitude=latitude />
        )
      )
    
  

  const updateLocations = () => 
    const newPosition = [
      
        "plate": "CAR1203",
        "latitude": 0,
        "longitude": 1,
      ,
    ]

    const timeout = setInterval(() => 
      setBusLocation(newPosition)
    , 1000)
  

  useEffect(updateLocations, [])

  return (
    <MapView
      provider=PROVIDER_GOOGLE
      style=styles.map
      initialRegion=region
      showsCompass=false
      showsTraffic=false
      showsIndoors=false
      showsBuildings=false
      showsPointsOfInterest=false
      loadingEnabled=false
    >
      _renderBusesOnMap(busLocation)
    </MapView>
  )


const styles = StyleSheet.create(
  map: 
    flex: 1,
    backgroundColor: '#ffff',
    height: '100%'
  ,
)

export default Maps

为什么它不更新它在地图上的位置？

我在这个项目中使用以下版本： 反应原生：0.60.5 反应原生地图：0.25.0

【参考方案1】：

试试这个：

const BusMarker = props => 
  const  longitude, latitude, plate  = props;

  const coordinates = 
    longitude: Number(longitude),
    latitude: Number(latitude)
  ;

  return (
    <Marker
      key=`bus-$plate-$new Date().getMilliseconds()`
      coordinate=coordinates
    />
  );
;

const Maps = () => 
  const [busLocation, setBusLocation] = useState([
    
      plate: "CAR1203",
      latitude: 37.78825,
      longitude: -122.4324
    
  ]);

  const [region] = useState(
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  );

  const _renderBusesOnMap = busLocation => 
    if (busLocation.length > 0) 
      return busLocation.map(( plate, longitude, latitude ) => 
        return (
          <BusMarker
            key=plate
            plate=plate
            longitude=longitude
            latitude=latitude
          />
        );
      );
    
  ;

  const updateLocations = () => 
    const newPosition = [
      
        plate: "CAR1203",
        latitude: 37.78845,
        longitude: -122.4424
      
    ];

    const timeout = setInterval(() => 
      setBusLocation(newPosition);
    , 1000);
  ;

  useEffect(updateLocations, []);

  return (
    <MapView
      provider=PROVIDER_GOOGLE
      style=styles.map
      initialRegion=region
      showsCompass=false
      showsTraffic=false
      showsIndoors=false
      showsBuildings=false
      showsPointsOfInterest=false
      loadingEnabled=false
    >
      _renderBusesOnMap(busLocation)
    </MapView>
  );
;

我认为主要问题是您在BusMarker 中设置coordinates 的方式。那里不需要使用useState。您可以将coordinates 设置为具有从道具接收到的纬度和经度值的对象。

我已经调整了坐标以便于测试。

---

更新

我将尝试通过解释我对行为的理解来补充这个答案。我将通过一个更一般的例子来解释。所以假设你有这样的代码：

const Component = props => 
  const [data, setData] = useState(props);
// ...

现在props 将被设置为data 的初始值。

但是 useState 不会在 props 以这种方式更改时更新。所以即使 props 发生了变化，data 仍然保持它最初传递的值。要告诉data 更新道具更改，您可以在Component 中使用useEffect：

useEffect(() => 
   setData(props);
, [props]);

但就像我在原始答案中所说的那样，在这种情况下没有理由使用useState。我们不需要保持Component 的状态与父props 同步，因为我们可以直接使用props。 所以不要使用我给出的useEffect方法，因为它没有必要，只是为了举例。

【讨论】：

有效！太感谢了！你能解释一下为什么它不使用 useState 重新渲染吗？

我已经更新了我的答案，并试图解释我认为正在发生的事情。