React Hooks Error All In One

React Hooks Error All In One

Uncaught TypeError: Object(...) is not a function

index.jsx?4777:65 Uncaught TypeError: Object(...) is not a function
    at getData (index.jsx?4777:65)
    at eval (index.jsx?4777:48)
    at commitHookEffectListMount (react-dom.development.js?f8c1:19731)
    at commitPassiveHookEffects (react-dom.development.js?f8c1:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js?f8c1:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?f8c1:237)
    at invokeGuardedCallback (react-dom.development.js?f8c1:292)
    at flushPassiveEffectsImpl (react-dom.development.js?f8c1:22853)
    at unstable_runWithPriority (scheduler.development.js?bacd:653)
    at runWithPriority$1 (react-dom.development.js?f8c1:11039)

    // const refBreadcrumb = useRef(null);
    // const refBreadcrumb = useRef('designer');
    const [loading, setLoading] = useState(false);
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(20);
    const [total, setTotal] = useState(0);
    const [search, setSearch] = useState('');
    const { dataSource, setDataSource} = useState([]);
    const { columns, setColumns} = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);

    useEffect(() => {
        getData();
    }, [page, search]);

    // http://localhost:9098/mock/designerList
    function getData (reset = false) {
        if (reset) {
            setPage(1);
            setPageSize(20);
            setTotal(0);
        }
        setLoading(true);
        const params = {
            word: search,
            page: page,
            per_page: pageSize,
            // author_id: '',
        };
        getDesignerList(params).then(res => {
            console.log('res =', res);
            setDataSource(res.data.data);
            setColumns(res.data.headers);
            setTotal(res.data.pagination.total);
        }).catch(err => {
            //
        }).finally(() => {
            setLoading(false);
        });
    }

export function bug

good 👍

import {
    // designerService
    getDesignerList,
    createDesigner,
    updateDesigner,
} from '@/services/personnel-management/designerService';

getDesignerList();

import axios from '@/utils/http.js';

const getDesignerList = (params = {}) => {
    console.log('params', params);
    return axios.get('/coach/api/material_personnel_config/author', { params });
};

const createDesigner = (params = {}) => {
    return axios.post('/coach/api/material_personnel_config/author', params);
};

const updateDesigner = (params = {}) => {
    return axios.put('/coach/api/material_personnel_config/author', params);
};

const designerService  = {
    getDesignerList,
    createDesigner,
    updateDesigner,
};

// good ✅
export {
    getDesignerList,
    createDesigner,
    updateDesigner,
};

export default designerService;

bad 👎

/*
import {
    // designerService
    getDesignerList,
    createDesigner,
    updateDesigner,
} from '@/services/personnel-management/designerService';
*/


import designerService from '@/services/personnel-management/designerService';

// designerService.getDesignerList();

```js
import axios from '@/utils/http.js';

// bad ❌, export object
export default {
    getDesignerList (params = {}) {
        return axios.get('/coach/api/material_personnel_config/author', { params });
    },
    createDesigner (params = {}) {
        return axios.post('/coach/api/material_personnel_config/author', params);
    },
    updateDesigner (params = {}) {
        return axios.put('/coach/api/material_personnel_config/author', params);
    },
};

// export default designerService;

https://stackoverflow.com/questions/51997481/typeerror-object-is-not-a-function-reactjs

https://www.sitepoint.com/community/t/reactjs-typeerror-object-is-not-a-function/345983

refs

https://codesandbox.io/s/antd-async-table-with-hooks-fetch-api-demo-g4xpl?file=/index.js

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---