为什么从获取结果更新状态会在渲染时更新整个对象数组？

Question

我遇到了问题，我想根据锻炼对象数组中包含的坐标获取城市名称。这是Files和project和sandbox的链接

    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;

我对代码进行了一些编辑并设法获得了唯一的位置名称，但这次我不会获得第一个锻炼对象的位置名称。然后位置名称将传递给第二个对象。

Answer 1

您应该更清楚您提供的代码。您省略了部分代码，这将使您的组件的结构更加清晰。

您似乎以错误的方式解决问题。

• 首先，如果您想呈现锻炼地点列表，您的状态应该包含一个列表而不是单个字符串。

    const [cityName, setCityName] = useState(null)

    workouts.map((exercise) => {
        ...
        setCityName(`${result.staddress}, ${result.city}`)
        ...
    }

每次查找另一个位置时，上面的内容只是将“cityName”设置为一个字符串。它应该包含一个字符串列表。

• 接下来，你的锻炼可能应该作为道具传递给组件（从你提供的几个代码 sn-ps 中不确定）。

• 然后最后 - 当你渲染结果时 - 你从“锻炼”状态经历所有锻炼，并渲染一些甚至不在“锻炼”状态的东西：你渲染“cityName”状态，它现在保存您查找的最后一次锻炼的位置：

return (
        <>
            workouts.map((workout) => {
                <h2 className = "workout-title">{cityName}</h2>
            }
        </>
    )

以下可能是解决您的问题的更好方法（不确定，因为我无法从您显示的有限代码中确定这是否正是您想要做的）：

WorkoutLocations.js：

import React, { useEffect, useState } from "react";

export const WorkoutLocations = ({ workoutsList }) => {
    const [cities, setCities] = useState([]);

    useEffect(() => {
        const getLocation = async (workout) =>
                fetch(`https://geocode.xyz/${workout.coords.latitude},${workout.coords.longitude}?geoit=json`)
            .then((res) => res.json())
            .then((res) => `${res.staddress}, ${res.city}`);                    
        const getLocations = async () =>
            Promise.all(workoutsList.map((workout) => getLocation(workout)));        
        getLocations().then((res) => setCities(res));
    }, [workoutsList]);

    return (
        <>
            {cities &&
                cities.map((city, id) => (
                    <h2 key={id} className="workout-title">
                        {city}
                    </h2>
                ))}
        </>
    );
};

（在您的应用内）：

import { WorkoutLocations } from "./WorkoutLocations"

...

const workouts = [
    {
        coords: {
            latitude: 41.27360151291927,
            longitude: -72.84886256490017
        }
    },
    {
        coords: {
            latitude: 40.7128,
            longitude: -74.006
        }
    }
];

...

return (
    <WorkoutLocations
        workoutsList={workouts}
    />
)

你可以在CodeSandbox看到工作代码。