Comment recharger le composant de carte lorsque certaines valeurs changent ?

Question

J'ai un composant qui charge une carte Google en fonction des coordonnées Lat et Lng transmises, mais lorsque je change cette valeur, j'ai besoin que la carte soit rendue à l'écran.

  const [getLat, setGetLat] = useState(geoLocation.mapsLat);
  const [getLng, setGetLng] = useState(geoLocation.mapsLng);

  const loadMap = getLat && getLng;

useEffect((previousValue) => {
      const { zipCode } = formValues;

      if (zipCode !== previousValue) {
        console.log('need reload the map');
      }
    },
    [ ]
  );

Comment rendre cette partie fixe de mon code lorsqu'elle apparaît dans console.log ?

  return (
    {loadMap && (
        <div className="container">
          <label>Map</label>
          <Map lat={getLat} lng={getLng} handleClick={handleSubmit} />
        </div>
      )}
  )

Answer 1

  const [getLat, setGetLat] = useState(geoLocation.mapsLat);
  const [getLng, setGetLng] = useState(geoLocation.mapsLng);

useEffect((previousValue) => {
      const { zipCode } = formValues;
      setGetLat(geoLocation.mapsLat);
      setGetLng(geoLocation.mapsLng);
   },[geoLocation.mapsLat,geoLocation.mapsLng]);

  return (
    {getLat && getLng && (
        <div className="container">
          <label>Map</label>
          <Map lat={getLat} lng={getLng} handleClick={handleSubmit} />
        </div>
      )}
  )

Le code ci-dessus doit résoudre votre problème. chaque fois que votre zipCode la valeur change, le composant sera rendu à nouveau et votre interface utilisateur sera mise à jour.