Javascript ReactJS错误：元素类型无效：应为字符串（对于内置组件）

我试图导出类并将其导入到另一个文件中，但我一直收到以下错误：。。。 检查

newsfeeddail

的渲染方法

我想从此文件导出组件：newsfeeddeil.js

import React from "react";

import {
  Card,
  Container,
  Dimmer,
  Header,
  Image,
  Loader,
  Message,
  Segment,
} from "semantic-ui-react";

import { articleDetailURL, } from "../constants";
import axios from "axios";

class NewsfeedDetail extends React.Component {
  state = {
    loading: false,
    error: null,
    data: [],
  };

  componentDidMount() {
    this.handleFetchItem();
  };

  handleFetchItem = () => {
    const {
      match: { params }
    } = this.props;

    this.setState({ loading: true });

    axios
      .get(articleDetailURL(params.articleID))
      .then(res => {
        this.setState({ data: res.data, loading: false });
      })
      .catch(err => {
        this.setState({ error: err, loading: false });
      });
  };

  render() {
    const { data, error, loading } = this.state;
    const item = data;

    return (
      <Container>
          {error && (
            <Message
              error
              header="There was some errors with your submission"
              content={JSON.stringify(error)}
            />
          )}
          {loading && (
            <Segment>
              <Dimmer active inverted>
                <Loader inverted>Loading</Loader>
              </Dimmer>
              <Image src="/images/wireframe/short-paragraph.png" />
            </Segment>
          )}

          <Header as='h4' textAlign='center'>
            <Header.Content>
                   {item.title}
            </Header.Content>
          </Header>

          <Card>
              <Card.Content>
                  <Card.Category >
                    {item.category}
                  </Card.Category>

                  <Card.Description>
                    {item.description}
                  </Card.Description>

                  <Card.Body>
                    {item.body}
                  </Card.Body>
                </Card.Content>
          </Card>
      </Container>
    );
  }
};

export default NewsfeedDetail;

import React from "react";
import { Route } from "react-router-dom";
import Hoc from "./hoc/hoc";

import Login from "./containers/Login";
import Signup from "./containers/Signup";
import HomepageLayout from "./containers/Home";
import ProductList from "./containers/ProductList";
import ProductDetail from "./containers/ProductDetail";
import OrderSummary from "./containers/OrderSummary";
import Checkout from "./containers/Checkout";
import Profile from "./containers/Profile";
import AboutLayout from "./containers/About";
import HotelLayout from "./containers/Hotel";
import NewsfeedList from "./containers/NewsfeedList";
import NewsfeedDetail from "./containers/NewsfeedDetail";

const BaseRouter = () => (
  <Hoc>
    <Route exact path="/products" component={ProductList} />
    <Route path="/products/:productID" component={ProductDetail} />
    <Route path="/login" component={Login} />
    <Route path="/signup" component={Signup} />
    <Route path="/order-summary" component={OrderSummary} />
    <Route path="/checkout" component={Checkout} />
    <Route path="/profile" component={Profile} />
    <Route exact path="/" component={HomepageLayout} />
    <Route exact path="/about" component={AboutLayout} />
    <Route exact path="/hotel" component={HotelLayout} />
    <Route exact path="/articles" component={NewsfeedList} />
    <Route path="/articles/:articleID" component={NewsfeedDetail} />
  </Hoc>
);

export default BaseRouter;

从“React”导入React；
进口{
卡片
集装箱，
调光器，
标题，
形象,，
装载机，
消息
段
}从“语义用户界面反应”；
从“./常量”导入{articleDetailURL，}；
从“axios”导入axios；
类NewsfeedDetail扩展了React.Component{
状态={
加载：false，
错误：null，
数据：[]，
};
componentDidMount（）{
此.handleFetchItem（）；
};
handleFetchItem=（）=>{
常数{
匹配：{params}
}=这是道具；
this.setState（{loading:true}）；
axios
.get（articleDetailURL（params.articleID））
。然后（res=>{
this.setState（{data:res.data，load:false}）；
})
.catch（错误=>{
this.setState（{error:err，load:false}）；
});
};
render（）{
const{data，error，loading}=this.state；
常数项=数据；
返回(
{错误&&(
)}
{加载&&(
加载
)}
{item.title}
{item.category}
{item.description}
{item.body}
);
}
};
导出默认的NewsfeedDetail；

我想把它导入这个文件：routes.js

import React from "react";

import {
  Card,
  Container,
  Dimmer,
  Header,
  Image,
  Loader,
  Message,
  Segment,
} from "semantic-ui-react";

import { articleDetailURL, } from "../constants";
import axios from "axios";

class NewsfeedDetail extends React.Component {
  state = {
    loading: false,
    error: null,
    data: [],
  };

  componentDidMount() {
    this.handleFetchItem();
  };

  handleFetchItem = () => {
    const {
      match: { params }
    } = this.props;

    this.setState({ loading: true });

    axios
      .get(articleDetailURL(params.articleID))
      .then(res => {
        this.setState({ data: res.data, loading: false });
      })
      .catch(err => {
        this.setState({ error: err, loading: false });
      });
  };

  render() {
    const { data, error, loading } = this.state;
    const item = data;

    return (
      <Container>
          {error && (
            <Message
              error
              header="There was some errors with your submission"
              content={JSON.stringify(error)}
            />
          )}
          {loading && (
            <Segment>
              <Dimmer active inverted>
                <Loader inverted>Loading</Loader>
              </Dimmer>
              <Image src="/images/wireframe/short-paragraph.png" />
            </Segment>
          )}

          <Header as='h4' textAlign='center'>
            <Header.Content>
                   {item.title}
            </Header.Content>
          </Header>

          <Card>
              <Card.Content>
                  <Card.Category >
                    {item.category}
                  </Card.Category>

                  <Card.Description>
                    {item.description}
                  </Card.Description>

                  <Card.Body>
                    {item.body}
                  </Card.Body>
                </Card.Content>
          </Card>
      </Container>
    );
  }
};

export default NewsfeedDetail;

import React from "react";
import { Route } from "react-router-dom";
import Hoc from "./hoc/hoc";

import Login from "./containers/Login";
import Signup from "./containers/Signup";
import HomepageLayout from "./containers/Home";
import ProductList from "./containers/ProductList";
import ProductDetail from "./containers/ProductDetail";
import OrderSummary from "./containers/OrderSummary";
import Checkout from "./containers/Checkout";
import Profile from "./containers/Profile";
import AboutLayout from "./containers/About";
import HotelLayout from "./containers/Hotel";
import NewsfeedList from "./containers/NewsfeedList";
import NewsfeedDetail from "./containers/NewsfeedDetail";

const BaseRouter = () => (
  <Hoc>
    <Route exact path="/products" component={ProductList} />
    <Route path="/products/:productID" component={ProductDetail} />
    <Route path="/login" component={Login} />
    <Route path="/signup" component={Signup} />
    <Route path="/order-summary" component={OrderSummary} />
    <Route path="/checkout" component={Checkout} />
    <Route path="/profile" component={Profile} />
    <Route exact path="/" component={HomepageLayout} />
    <Route exact path="/about" component={AboutLayout} />
    <Route exact path="/hotel" component={HotelLayout} />
    <Route exact path="/articles" component={NewsfeedList} />
    <Route path="/articles/:articleID" component={NewsfeedDetail} />
  </Hoc>
);

export default BaseRouter;

从“React”导入React；
从“react router dom”导入{Route}；
从“/Hoc/Hoc”导入Hoc；
从“/containers/Login”导入登录名；
从“/containers/Signup”导入注册；
从“/containers/Home”导入HomepageLayout；
从“/containers/ProductList”导入ProductList；
从“/containers/ProductDetail”导入ProductDetail；
从“/containers/OrderSummary”导入订单摘要；
从“/containers/Checkout”导入签出；
从“/containers/Profile”导入配置文件；
从“/containers/About”导入AboutLayout；
从“/containers/Hotel”导入HotelLayout；
从“/containers/NewsfeedList”导入NewsfeedList；
从“/containers/NewsfeedDetail”导入NewsfeedDetail；
const BaseRouter=（）=>(
);
导出默认BaseRouter；

我尝试过在没有默认值的情况下导出，并在导入时使用{}，但也不起作用。

---

请帮助我。

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

newsfeeddail

的渲染方法。大家好，问题解决了。事实证明，这不是ES6中的导入和导出问题。在api端点中放置“/”是我的错误，这导致获取数据失败。多么愚蠢的举动