元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。反应

Question

我不断得到

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

有问题的特定代码是api.getAllUsers（）和this.setState的函数调用，我尝试使用{}和其他方法修改导出和导入符号，并且我的API确实返回了我用console.log检查的数据（“ TCL：用户列表->渲染->用户”，用户）。

接下来我可以尝试什么？

componentDidMount = async () => {
        this.setState({ isLoading: true})
        
        await api.getAllUsers().then(users => {
            this.setState({
                users: users.data.data,
                isLoading: false,
            })
        })
        .catch( (error) => console.log(error))
    }

指定的行是的第26和27行

import React, {Component} from 'react'
import ReactTable from 'react-table'
import api from '../api'

import styled from 'styled-components'

import 'react-table/react-table.css'

const Wrapper = styled.div`
    padding: 0 40px 40px 40px;
`

class UsersList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            users: [],
            columns: [],
            isLoading: false,
        }
    }

    componentDidMount = async () => {
        this.setState({ isLoading: true})
        
        await api.getAllUsers().then(users => {
            this.setState({
                users: users.data.data,
                isLoading: false,
            })
        })
        .catch( (error) => console.log(error))
    }

    render(){
        const { users, isLoading} = this.state
        console.log('TCL: UsersList -> render -> users', users)

        const columns = [
            {
                Header: 'ID',
                accessor: '_id',
                filterable: true,
            },
            {
                Header: 'Name',
                accessor: 'name',
                filterable: true,
            },
            {
                Header: 'Mac',
                accessor: 'mac',
                filterable: true,
            },
            {
                Header: 'Alert',
                accessor: 'alert',
                filterable: true,
            },
            {
                Header: 'Time',
                accessor: 'time',
                Cell: props => <span>{props.value.join(' / ')}</span>,
            },

        ]
        let showTable = true
        if(!users.length) {
            showTable = false
        }

        return(
            <Wrapper>
                {showTable && (
                    <ReactTable
                        data ={users}
                        columns={columns}
                        loading={isLoading}
                        defaultPageSize={10}
                        showPageSizeOptions={true}
                        minRows={0}
                    />
                )}
            </Wrapper>
        )
    }
}

export default UsersList

我要从中导出的API代码是

import axios from 'axios'

const userapi = axios.create({
    baseURL: 'http://localhost:80/api',
})

const gatewayapi = axios.create({
    baseURL: 'http://localhost:3000/api',
})

export const insertUser = payload => userapi.post(`/user`, payload)
export const getAllUsers = () => userapi.get(`/users`)
export const updateUserById = (id, payload) => userapi.put(`/user/${id}`, payload)
export const deleteUserById = id => userapi.delete(`/user/${id}`)
export const getUserByID = id => userapi.get(`/user/${id}`)
export const getUserByMac = mac => userapi.get(`user/mac/${mac}`)

export const insertEntry = payload => gatewayapi.post(`/gateway`, payload)
export const getAllEntry = () => gatewayapi.get(`/gateways`)
export const updateEntryById = (id, payload) => gatewayapi.put(`/gateway/${id}`, payload)
export const deleteEntryById = id => gatewayapi.delete(`/gateway/${id}`)
export const getEntryByID = id => gatewayapi.get(`/gateway/${id}`)
export const getEntriesByMac = mac => gatewayapi.get(`gateways/mac/${mac}`)
export const getEntriesByUID = uid => gatewayapi.get(`/gateways/uid/${uid}`)
export const getEntriesByTimeAndMac = (gatewaymac, time1, time2) => gatewayapi.get(`gateways/time/${gatewaymac}/${time1}/${time2}`)

const apis = {
   insertEntry,
   getAllEntry,
   updateEntryById,
   deleteEntryById,
   getEntriesByMac,
   getEntryByID,
   getEntriesByUID,
   getEntriesByTimeAndMac,
   insertUser,
   getAllUsers,
   updateUserById,
   deleteUserById,
   getUserByID,
   getUserByMac,
}

export default apis