es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Por cada coordenada en el objeto, quiero obtener la dirección y ciudad correspondiente.

11 Jun, 2023 Programación

Quiero obtener la dirección y la ciudad para cada array de objetos, pero obtengo la misma dirección y ciudad para todos los objetos. Para el proyecto actual, obtengo las coordenadas haciendo clic en el mapa y usando mapEvents para obtener latlng. Las coordenadas se almacenan en el array de entrenamientos. Aquí está el código de sandbox simplificado.

export const WorkoutsData = [
  {
  id: 1,
  coords: {latitude: 56.27360151291927, 
  longitude:-82.84886256490017},
  },

  {
  id: 2,
  coords: {latitude: 49.27360151291927, 
  longitude: -75.84886256490017},
  },

  {
  id: 3,
  coords: {latitude: 39.27360151291927, 
  longitude: -79.84886256490017},
  }
];



import React, { useEffect, useState } from "react";
import "./styles.css";
import { WorkoutsData } from "./WorkoutLocation";

const App = () => {
  const [workouts, setWorkouts] = useState(WorkoutsData);
  const [cityName, setCityName] = useState([]);

  const id = (Date.now() + "").slice(-10);

  useEffect(() => {
    workouts.map((workout) => {
      fetch(
        `https://geocode.xyz/${workout.coords.latitude},${workout.coords.longitude}?geoit=json`
      )
        .then((res) => res.json())
        .then((result) => {
          setCityName([`${result.staddress}, ${result.city}`]);
        });
    });
  }, [workouts]);

  return (
    <>
      <div key={id}>
        {workouts.map((workout) => {
          return <h2 key={workout.id}>{`${cityName}`}</h2>;
        })}
      </div>
    </>
  );
};

export default App;

Intenté muchos otros métodos. Pude obtener el nombre de la ubicación específica para los objetos de entrenamiento, pero el primercityName no renderizó y el primer cityName se pasó al segundo objeto de entrenamiento.

enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En la implementación actual, setCityName está sobrescribiendo el valor previo de cityName en cada iteración de la función map. En lugar de establecer una matriz de nombres de ciudades, puede almacenar el nombre de la ciudad para cada objeto de entrenamiento en una variable de estado separada utilizando la identificación del entrenamiento como clave.

    Así es como puede modificar el código:

    const App = () => {
  const [workouts, setWorkouts] = useState(WorkoutsData);
  const [cityNames, setCityNames] = useState({});
  const id = (Date.now() + "").slice(-10);

  useEffect(() => {
    workouts.forEach((workout) => {
      fetch(
        `https://geocode.xyz/${workout.coords.latitude},${workout.coords.longitude}?geoit=json`
      )
        .then((res) => res.json())
        .then((result) => {
          setCityNames((prevCityNames) => ({
            ...prevCityNames,
            [workout.id]: `${result.staddress}, ${result.city}`
          }));
        });
    });
  }, [workouts]);

  return (
    <>
      <div key="{id}">
        {workouts.map((workout) => (
          <h2 key="{workout.id}">{cityNames[workout.id]}</h2>
        ))}
      </div>

  );
};

export default App;

    Aquí, cityNames es un objeto con IDs de entrenamiento como claves y nombres de ciudades correspondientes como valores. setCityNames actualiza este objeto fusionando el estado anterior de cityNames con una nueva propiedad para el ID actual de entrenamiento.

    En la función map, buscamos el nombre de la ciudad para cada entrenamiento por su ID en el objeto cityNames.

    Puede ver este código modificado en acción en este sandbox.

Comments are closed.