带有React钩子useEffect的链式API调用

Question

我需要以下顺序的解决方案：

浏览器检查用户的地理位置（假设他允许）->​​经度和纬度保持不变并用于2个API调用-> Google反向地理位置API会检查城市名称，同时DarkSky API会检查天气- >第三个API等待先前调用的结果，并将其用作第三个Unsplash API的查询]

这是我的代码：

const [position, setPosition] = useState({ latitude: '50.049683', longitude: '19.944544' });
const [info, setInfo] = useState({ city: null, weather: null });
const [photos, setPhotos] = useState([]);

useEffect(() => {
    const fetchInfo = async () => {
      try {
        const [cityInfo, weatherInfo] = await Promise.all([
          axios.get(
            `https://maps.googleapis.com/maps/api/geocode/json?latlng=${position.latitude},${position.longitude}&language=en&result_type=locality&key=${GEO_ACC_KEY}`,
          ),
          axios.get(
         `https://api.darksky.net/forecast/${WEATHER_ACC_KEY}/${position.latitude},${position.longitude}?exclude=hourly,daily,alerts,flags`,
          ),
        ]);
        setInfo({
          city: cityInfo.data.results[0].address_components[0].short_name,
          weather: weatherInfo.data.currently.summary.toLowerCase(),
        });

        console.log('Info', info); // Results in {city: null, weather: 'null'}

        const photosData = await axios.get(
          `https://api.unsplash.com/search/photos?query=${info.weather}+${info.city}&page=1&per_page=8&client_id=${UNSPLASH_ACC_KEY}`,
        );

        setPhotos(photosData.data.results);

        console.log('Photos data from API call:', photosData); //Object based on query: "null+null"
        console.log('Photos:', photos); // Empty array
      } catch (err) {
        // Handling errors
      }
    };
    fetchInfo();
  }, []);

  console.log('Info outside axios get', info); // Results in object with city name and current weather
  console.log('photos outside axios get', photos); // Proper result I am looking for

目前，只有在useEffect外部才可以使用适当的数据。它不提供第三个API调用的数据（目前，Unsplash API调用使用“ null + null”作为查询）。

因此，我去了useEffect文档，它说第二个参数（数组）获取依赖项并在任何状态依赖项发生更改时进行更新。

我尝试如下使用它：

useEffect(() => {
    const fetchInfo = async () => {
      //rest of the code
},
fetchInfo();
}, [info]);

它为API调用使用适当的关键字（城市和天气，而不是null null），但BUT创建了无限的API调用。

我该如何解决？

Answer 1

状态更新不是立即进行的，将在下一个渲染周期中反映出来。

[请查看此帖子以获取有关此信息的更多详细信息：useState set method not reflecting change immediately

此外，您还必须注意，要链接API调用，而不是在信息更改时再次调用整个useEffect。将info添加为依赖项肯定会导致无限循环，因为info是在useEffect中设置的。

为了解决您的问题，您可以改为在调用api时使用设置为状态的值

    const newInfo = {
      city: cityInfo.data.results[0].address_components[0].short_name,
      weather: weatherInfo.data.currently.summary.toLowerCase(),
    }

     setInfo(newInfo);

    console.log('Info', info); // Results in {city: null, weather: 'null'}

    const photosData = await axios.get(
      `https://api.unsplash.com/search/photos?query=${newInfo.weather}+${newInfo.city}&page=1&per_page=8&client_id=${UNSPLASH_ACC_KEY}`,
    );