RTK 查询错误与 API 调用 Open Weather 的获取

Question

我正在处理一个超级烦人的问题，我几个小时都无法解决。我正在尝试从开放天气中获取 API，只需将 URL 放入 google 即可使其工作，并且我已使用 React 内置的 fetch 命令使其工作，但我真的很想使用 RTK 查询。我遵循了 RTK 查询 T 的指南，但我的 API 调用始终返回未定义。这是我的 API 代码：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Define a service using a base URL and expected endpoints
export const weatherApi = createApi({
    reducerPath: 'weatherApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://api.openweathermap.org/data/2.5/weather?' }),
    endpoints: (builder) => ({
      getWeather: builder.query({
        query: (lat, long, units) => `lat=${lat}&lon=${long}&units=${units}&APPID=API_KEY_HERE`,
      }),
    }),
  })
  
  // Export hooks for usage in functional components, which are
  // auto-generated based on the defined endpoints
  export const { useGetWeatherQuery } = weatherApi

我的 redux 商店：

import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/dist/query'
import { weatherApi } from './api'


export const store = configureStore({
  reducer: {
    [weatherApi.reducerPath]: weatherApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().concat(weatherApi.middleware),
})

setupListeners(store.dispatch)

代码中API调用：

  const { data, error, isLoading } = useGetWeatherQuery('29.7','-95','Imperial')
  console.log(data)

返回“未定义” 还尝试了多种输入组合：

const { data, error, isLoading } = useGetWeatherQuery({lat: 29.7,long: -95,units: 'Imperial'})

我将采用完全相同的 API URL 并将其粘贴到 google 中，或者通过 fetch 命令，它工作得很好，立即吐出结果：

  const fetchWeatherData = async (lat, long) => {
    fetch(`http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&units=${units}&APPID=`, {
      "headers": {
        "x-api-key": API_KEY_HERE
      }
    })
      .then(response => response.json())
      .then(response => {

      })
      .catch(err => {
        console.log(err)
      })
  }

如果有人能告诉我 Redux 语句有什么问题，我会永远爱你......谢谢！

Answer 1

经过多次尝试和错误，以及大量在线研究，我能够让它为那些需要它的人工作：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Define a service using a base URL and expected endpoints
export const weatherApi = createApi({
    reducerPath: 'weatherApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://api.openweathermap.org/data/2.5/weather?' }),
    endpoints: (builder) => ({
      getWeather: builder.query({
        query: (arg) => {
          const { lat, long, units} = arg;
          const newURL = `lat=${lat}&lon=${long}&units=${units}&APPID=API_KEY_HERE`,
          return newURL;
      }),
    }),
  })
  
  // Export hooks for usage in functional components, which are
  // auto-generated based on the defined endpoints
  export const { useGetWeatherQuery } = weatherApi

然后这样称呼它：

const { data , error, isLoading, isSuccess } = useGetWeatherQuery({lat: '29.7', long: '-95', units: 'Metric'}) 

RTKQuery 本质上只接受一个参数，因此您必须将其作为一个参数输入，然后对其进行解构。

Answer 2

返回

undefined

一段时间是很正常的 - 毕竟，数据需要通过互联网传输到您的计算机，如果连接不好，这可能需要几秒钟的时间。但与此同时，没有什么可以阻止您的组件渲染。 React 不会暂停（除非你使用 Suspense，目前它对于此类事情仍处于实验阶段）。

这就是为什么您始终必须检查

isLoading

，甚至更好：

isSuccess

，然后才能访问

data

。在前几个渲染中，您可能需要渲染加载指示器，而不是使用

data

执行实际逻辑。