reactjs - TypeError: Object(...) 不是 ReactJS 中的函数

Question

我正在尝试在我的 localhost 中运行此 Web 应用程序。作为 ReactJS 和 Firebase 的新手，我不知道如何调试此错误。我尝试用谷歌搜索错误，但仍然找不到解决方案。

这是我的 index.js。错误来自第 17 行。

1   import { convertLegacyDataProvider } from 'react-admin';
2   import { FirebaseAuthProvider } from 'react-admin-firebase';
3   import { FirestoreDataProvider } from 'ra-data-firestore';
4   import polyglotI18nProvider from 'ra-i18n-polyglot';
5   import { app, firebaseConfig, db } from '@/vars/firebase';
6   import { USERS } from '@/vars/resources';
7   import messages from '@/vars/i18n';
8   import usersDataProvider from './usersDataProvider';
9
10  const debug = true;
11  const log = (...args) => {
12     if (process.env.NODE_ENV === 'development' && debug) console.log(...args);
13  };
14
15  export const authProvider = FirebaseAuthProvider(firebaseConfig, { app });
16
17  const firestoreDataProvider = FirestoreDataProvider(firebaseConfig, {
18     redundantUpdate: {
19        products: {
20           query: id => db.collectionGroup('slots').where('product.id', '==', id),
21           source: ['name', 'description', 'priceCash', 'image.src'],
22           target: 'product',
23        },
24     },
25  });
26
27  const _usersDataProvider = convertLegacyDataProvider(usersDataProvider);
28
29  export const dataProvider = new Proxy(firestoreDataProvider, {
30     get(target, name) {
31        return (resource, params) => {
32           log(name + ': ', { resource, params });
33           if (resource === USERS && ['getOne', 'create', 'update', 'delete', 'deleteMany'].includes(name)) {
34              return _usersDataProvider[name](resource, params);
35           }
36        
37           return target[name](resource, params);
38        };
39     },
40  });
41
42  export const i18nProvider = polyglotI18nProvider(() => messages, 'en', {
43     allowMissing: true,
44     onMissingKey: key => key,
45  });

编辑：这是我的 usersDataProvider.js

1   import { CREATE, DELETE, DELETE_MANY, GET_ONE, UPDATE } from 'react-admin';
2   import { functions, db } from '@/vars/firebase';
3
4   const usersDataProvider = async (type, resource, params) => {
5      switch (type) {
6         case GET_ONE: {
7            const { id } = params;
8            const userSnapshot = await db
9            .collection('users')
10           .doc(id)
11           .get();
12
13           if (userSnapshot.exists) {
14              let data = userSnapshot.data();
15
16              const { client } = data;
17              if (client) {
18                 const clientSnapshot = await db
19                 .collection('clients')
20                 .doc(client.id)
21                 .get();
22
23                 if (clientSnapshot.exists) {
24                    data = {
25                       ...data,
26                       client: {
27                          ...client,
28                          ...clientSnapshot.data(),
29                       },
30                    };
31                 }
32              }
33
34              return { data: { id, ...data } };
35           } else {
36              throw new Error('Id not found');
37           }
38        }
39
40        case CREATE: {
41           const data = await functions.httpsCallable('auth-createUser')(params.data);
42           return data;
43        }
44
45        case UPDATE: {
46           const { id } = params;
47           const data = await functions.httpsCallable('auth-updateUser')({ id, ...params.data });
48           return data;
49        }
50
51        case DELETE: {
52           const { id } = params;
53           await functions.httpsCallable('auth-deleteUser')({ id });
54           return { data: id };
55        }
56
57        case DELETE_MANY: {     
58           const { ids } = params;
59           await ids.map(id => functions.httpsCallable('auth-deleteUser')({ id }));
60           return { data: ids };
61        }
62
63        default:
64           throw Error(`Unhandled method: ${resource} ${type}`);
65        }
66  };
67
68  export default usersDataProvider;

index.js 和 usersDataProvider.js 都在 ../src/providers/ 文件夹中。

标签： reactjsfirebase

Answer 1

尝试像这样导入 usersDataProvider - { usersDataProvider }