按顺序使用多个 useEffect。获取位置后获取 API

Question

这是我第一次使用 React。我正在开发一个基本的天气应用程序。我在按顺序使用多个 useEffect 挂钩时遇到问题。我需要在页面加载时依次获取地理位置和天气 APP api。但是我的位置一直返回null，这是代码

  useEffect(()=>{
  navigator.geolocation.getCurrentPosition((position) => {
    setLatitude(position.coords.latitude)
    setLongitude(position.coords.longitude)
  });
},[])

useEffect(()=> {
  axios.get(`${api.base}weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${api.key}`).then
  ((response) => {
    console.log(response.data)
  })

},[])

任何解决方案将不胜感激。谢谢

Answer 1

为此，您可以使第二个 useEffect 取决于您的纬度和经度状态：

   useEffect(()=>{
    
    axios.get(`${api.base}weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${api.key}`).then
     ((response) => {
         console.log(response.data)
      })

   },[latitute, longitude])

每当纬度或经度状态发生变化时，这将调用 useEffect。

Answer 2

您的 useEffects 运行在第一次渲染后是异步的。如果您需要对它们进行排序，那么您应该运行它们在同一个 useEffect 中并添加您的代码以在 getCurrentPosition 的成功回调中获取响应。

看这个例子：

useEffect(() => {
  const fetchData = async() => {
    navigator.geolocation.getCurrentPosition((position) => {
        setLatitude(position.coords.latitude)
        setLongitude(position.coords.longitude);

        const response = await axios.get(`${api.base}weatherlat=${position.coords.latitude}&lon=${position.coords.longitude}&units=metric&appid=${api.key}`);
      });
    });
}, []);

注意：setState 也是异步的，因此我们为什么直接使用 return 位置来获取 axios 请求。

另一种方法是，正如另一个答案提到的那样，让你的第二个 useEffect 在 deps 数组中使用 [latitude, longitude] 但如果你不想每次都不断获取天气 API 数据时间 lat/long 发生变化，那么您可以通过这种方式在初始组件安装时运行这一次。

按顺序使用多个 useEffect。获取位置后获取 API

using multiple useEffect in order. fetching API after fetching the location

reactjs

use-effect