reactjs 无法使用RTKquery读取未定义的属性(阅读“userApi”)

bvuwiixz 于 2023-02-22 发布在 React

关注(0)|答案(2)|浏览(122)

我正在用React.js学习一个RtkQuery库。我正在学习一个RtkQuery的官方文档，并从快速入门指南开始我的学习。我有一个运行在json服务器上的小数据库。和这样的代码（类似于文档中的快速入门）。

存储.js

import {configureStore} from "@reduxjs/toolkit"

import { usersApi } from "./index"

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

用户Api.js

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

export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: fetchBaseQuery({baseUrl: "http://localhost:3001/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: () => `users`,

        })
    })
})

export const {useGetUsersQuery} = usersApi

此代码位于简单的jsx组件中

import {useGetUsersQuery} from "./redux"

const Loading = () => {
 return (<h1>isLoading</h1>)
}

const ShowData = ({data}) => {
  return (
    <ul>
      {data.map(user => {
        <li key={user.id}>{`name: ${user.name}`}</li>
      })}
    </ul>
  )
}

function App() {

  const {data , isLoading} = useGetUsersQuery()
 
  return (
    <div>
 {isLoading ? <Loading/> : <ShowData data={data}/>}
    </div>
  );
}

export default App;

这是浏览器控制台中的错误文本

index.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'usersApi')
    at Module.usersApi (index.js:10:1)
    at ./src/redux/store.js (store.js:8:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/redux/index.js (index.js:10:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.js (bundle.js:15:64)
usersApi @ index.js:10
./src/redux/store.js @ store.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/redux/index.js @ index.js:10
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/App.js @ bundle.js:15
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.js @ App.js:30
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

关于更多的信息，我在redux devstools扩展中没有看到任何内容。

reactjs

来源：https://stackoverflow.com/questions/74668080/cannot-read-properties-of-undefiend-reading-userapi-using-rtkquery

2条答案

按热度按时间

jvlzgdj91#

溶液：修复导入路径

在store.js中更改此行

import { usersApi } from "./index"

改为：

import { usersApi } from "./usersApi"

问题：你有一个依赖周期

你的store.js文件是从index.js导入的。我猜usersApi.js和store.js都在同一个文件夹中。大概index.js重新导出了usersApi变量，这样路径就不会在传统意义上是"错误的"。但是它会创建一个循环导入!
index.js和store.js之间的依赖循环意味着在处理store.js文件时index.js的内容未定义。store变量依赖于index.js的内容，而index.js的内容依赖于store变量。
因此，必须直接从usersApi.js文件导入usersApi变量。

赞(0）回复(0）举报 2023-02-22

yvfmudvl2#

首先，我将对store.js进行修改。它没有被很好地配置。你把你的导入搞混了。注意那些导入。

import {configureStore} from "@reduxjs/toolkit"

import { usersApi } from "./usersApi"

export const store = configureStore({
    reducer : {
        usersApi. : usersApi.reducer,
    },
    middleware: (getDefMiddleware) => getDefMiddleware().concat(usersApi.middleware)
})

其次，我猜您是从user.json文件而不是user获取数据的，因此在将其添加到userApi文件时，我将添加.json扩展名。

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

export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: fetchBaseQuery({baseUrl: "/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: () => `users.json`,
        })
    })
})
// also you need to export the useQuery because that's what you need in your component
export const useGetUsersQuery = usersApi.endpoints.getUsers.useQuery

// if you prefer the destructure syntax
// export const { useQuery } = usersApi.endpoints.getUsers
// should be sufficient

最后，useGetUserQuery没有isLoading属性，因此它将始终处于未定义状态。因此，可能需要创建一个函数来设置isloading的值。此外，您还需要将应用程序 Package 在提供程序中，并将store的值作为props传递给它

import {useGetUsersQuery} from "./userApi"
import {store} from "./store"
import {Provider} from "react-redux"

const Loading = () => {
    return (<h1>isLoading</h1>)
}

const ShowData = ({data}) => {
  return (
    <ul>
      {data.map(user => {
        <li key={user.id}>{`name: ${user.name}`}</li>
      })}
    </ul>
  )
}

function App() {

  const {data} = useGetUsersQuery()
  const isLoading = () => false
 
  return (
    <Provider store={store}>
        <div>
             {isLoading ? <Loading/> : <ShowData data={data}/>}
        </div>
    </Provider>
  );
}

export default App;

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 无法使用RTKquery读取未定义的属性(阅读“userApi”)

2条答案

溶液：修复导入路径

问题：你有一个依赖周期

相关问题

热门标签

最新问答