RTK查询如何记录和显示部分数据？

Question

我正在 rtk-query 的帮助下使用 react native typescript 和 expo 创建移动应用程序。我正在尝试从 API https://pokeapi.co/api/v2/pokemon/snorlax/ 获取部分数据。例如，从 API 我只是想获取名称或其他任何东西，但一些部分数据。

usersApi.tsx

// Need to use the React-specific entry point to allow generating React hooks
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://pokeapi.co/api/v2/',
    method: 'GET'
   }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name: string) => `pokemon/${name}`,
    }),
  }),
})

export const { useGetPokemonByNameQuery } = pokemonApi

ContactScreen.tsx

import React from 'react';
import {
  Image,
  ImageBackground,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import { View, Text } from '@components/Themed';
import { useFonts } from '@use-expo/font';
import * as Linking from 'expo-linking';
import AppLoading from 'expo-app-loading';
import { useGetPokemonByNameQuery } from '../apiCalls/usersApi';

const ContactScreen = ({name}: {name: string}) => {
  const [isLoaded] = useFonts({
    'Poppins-Medium': require('../../assets/fonts/Poppins-Medium.otf'),
    'Poppins-Regular': require('../../assets/fonts/Poppins-Regular.otf')
  });

  const { data } = useGetPokemonByNameQuery(name)
  
  console.log(data)

[...]

App.tsx

[...]

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <Provider store={store}>
        <SafeAreaProvider>
          <I18n />
          <ContactScreen name={'snorlax'}/>
          <StatusBar />
        </SafeAreaProvider>
      </Provider>
    );
  }
}

来自 ContactScreen.tsx 我正在获取数据，但有很多我不需要的废话。 console.log(data.species.name) doesn't work and getting me an error TypeError data is undefinedWHICH onlyconsole.log(data)` 之类的东西没有。

Answer 1

您可能正在访问数据属性，而没有检查是否已获取数据。

if (data && data.species) {
  console.log(data.species.name)
}

或

console.log(data?.species?.name)

RTK查询如何记录和显示部分数据？

How to log and display partial data with RTK query?

react-native

react-redux

expo

react-hooks

rtk-query