当尝试使用 Reactstrap Card 时，我收到警告：React.jsx：类型无效——需要一个字符串（对于内置组件）或一个 class/function？

Question

我试图从 Reactstrap 库中导入 Card 组件，不幸的是这导致了以下错误。

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

当我删除该元素后，该页面会再次按预期运行。

导入（在配置文件组件中）：

import React, { Component } from 'react';
import {Card, Container, Table} from 'reactstrap';

导出（在配置文件底部）：

export default Profile;

在 APP.js 路由器中：

<Route path='/profile' exact={true} component={Profile}/>

完整配置文件组件：

import React, { Component } from 'react';
import {Card, Container, Table} from 'reactstrap';
import AppNavbar from './AppNavbar';

const GET_SINGLE_USER_URL = 'http://localhost:8080/users/get-user-by-username'

class Profile extends Component {

    constructor(props) {
        super(props);
        this.state = {user: '', token: ''};
    }

    componentDidMount() {
        const payload = {
            "username": localStorage.getItem("username"),
            "password": localStorage.getItem("password")
        };
        fetch(GET_SINGLE_USER_URL, {
            method: 'POST',
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": localStorage.getItem("token")
            },
            body: JSON.stringify(payload)
        })
            .then(response => response.json())
            .then(data => this.setState({user: data}));
    }

    render() {
        const {user, isLoading} = this.state;

        if (isLoading) {
            return <p>Loading...</p>;
        }

        return (
            <div>
                <AppNavbar/>
                <Container fluid>
                    <h3 className="player-list-header">Profile</h3>

                    <Table className="mt-4">
                        <thead>
                        <tr id="player-list-row">
                            <th className="player-list-data-text">Name</th>
                            <th className="player-list-data-text">Username</th>
                            <th className="player-list-data-text">Location</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr key={user.id}>
                            <td style={{whiteSpace: 'nowrap'}} className="player-list-key-text">{user.name}</td>
                            <td className="player-list-key-text">{user.username}</td>
                            <td className="player-list-key-text">{user.location}</td>
                        </tr>
                        </tbody>
                    </Table>
                    <Card>
                        <Card.Body>This is some text within a card body.</Card.Body>
                    </Card>


                </Container>
            </div>
        );

    }

}
export default Profile;

Answer 1

我认为您可能没有仔细阅读 reactstrap 的文档 - 组件应该是 CardBody，而不是 Card.Body。 Here's a link to the docs, and a simplified CodeSandbox.

当尝试使用 Reactstrap Card 时，我收到警告：React.jsx：类型无效——需要一个字符串（对于内置组件）或一个 class/function？

When trying to use Card of Reactstrap I get Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function?

javascript

reactjs

import

components

reactstrap