react native中未定义RTK查询功能



我正在使用RTK查询从端点获取数据,设置像这样的文件夹结构

src(根(

  • features/api/apiSlice.js
  • screens/ChatScreen.js

我已经像这个一样设置了apiSlice.js

import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({baseUrl: 'https://api.covid19api.com'}),
  endpoints: builder => ({
    getEmojiPoints: builder.query({
      query: () => '/countries',
    }),
  }),
});
export const {useGetEmojiPoints} = apiSlice;

然后在类似的功能组件中导入useGetEmojiPoints钩子

import {useGetEmojiPoints} from '../features/api/apiSlice';
  const {
    data: emojiPoints,
    isLoading,
    isSuccess,
    isError,
    error,
  } = useGetEmojiPoints(); // getting this undefined (not a function)

像这个一样设置App.js

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  useColorScheme,
  Text,
  StyleSheet,
} from 'react-native';
import ChartScreen from './src/screens/ChartScreen';
import {ApiProvider} from '@reduxjs/toolkit/query/react';
import {apiSlice} from './src/features/api/apiSlice';
const AppWrapper = () => {
  return (
    <ApiProvider api={apiSlice}>
      <App />
    </ApiProvider>
  );
};
const App = () => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView>
        <ChartScreen />
      </ScrollView>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#fff'},
});
export default AppWrapper;

为什么它给我未定义的查询钩子?

它是useGetEmojiPointsQuery,而不是useGetEmojiPoints

最新更新