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

Question

在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是未定义的WHICH onlyconsole.log(Data)‘则不是。

Answer 1

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

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

或

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