Question

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

检查Cart。
的渲染方法

App.js

App

index.js

import React, {Component, Fragment} from 'react';
import {Typeahead, Control} from 'react-typeahead';
import {FormGroup} from 'react-bootstrap';


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      multiple: false
    }
}

    render() {
      const {multiple} = this.state;
      return (

    <Fragment>
      <Typeahead
        labelKey="name"
        multiple={multiple}
        options={[
        'Waylon Dalton',
        'Justine Henderson',
        'Abdullah Lang',
        'Marcus Cruz',
        'Thalia Cobb',
        'Mathias Little',
        'Eddie Randolph',
        'Angela Walker',
        'Lia Shelton',
        'Hadassah Hartman',
        'Joanna Shaffer',
        'Jonathon Sheppard'
      ]}
        placeholder="Choose a state..."
      />
      <FormGroup>
        <Control
          checked={multiple}
          onChange={(e) => this.setState({multiple: e.target.checked})}
          type="checkbox">
          Multi-Select
        </Control>
      </FormGroup>
    </Fragment>
       )
    }
}

我使用CRA创建了这个项目。此错误表明我的导入/导出有问题但我在导入/导出两个文件时都没有发现任何错误，错误集中在App.js渲染功能以及index.js文件的渲染上。我也在这里查了一下，但它对我不起作用，有人可以帮助我。

Answer 1

您的应用导入/导出正常。

我认为你混淆了Fragment导入（它是React的一部分）和Control导入：

import React, {Component, Fragment} from 'react';
import {Typeahead} from 'react-typeahead';
import {FormGroup, FormControl as Control} from 'react-bootstrap';

Answer 2

我认为这个问题存在于此处

import {Typeahead, Fragment, Control } from 'react-typeahead';

Typeahead导入是好的，但我认为片段和控制是错误的根源，请尝试删除它们并查看

Answer 3

不确定是否有帮助，但这就是我。......

第一个带来相同错误的代码

import React from 'react';
import { BrowserRouter , Route, Link} from 'react-dom';***
import './App.css';

然后意识到它实际上应该是……

import React from 'react';
import { BrowserRouter , Route, Link} from 'react-router-dom';***
import './App.css';

希望这会对某人有所帮助！

Answer 4

我遇到了同样的问题。就我而言，是我使用了错误的 MobX HOC，即 $( document ).ready(function() { $.get("Components/head.htm", function(data) { $("head").append(data); }); $("#logo").on("error", function() { $(this).hide(); $("#name").show(); }); $("#search").keyup(function() { alert($(this).val()); }); }); 而不是 observable。

如果你犯了同样的错误，你可以通过切换来修复

observer

到

export default observable(MyReactComponent);

Answer 5

检查导入语句

您的导入语句可能没有从正确的文件中导入。确保它们都正确。

示例：

import { Link } from "react"; // oops! hard to see, but that's the wrong file.
import { Link } from "react-router-dom"; // that's better

检查组件的拼写

// what's wrong with this?
const pageOne = () => {
  return (<Link to="/pagetwo"> pagetwo </Link>); // oops! spelling of the component is wrong!
};

const pageTwo = () => {
  return (<Link to="/"> pageone </Link>);
};

它们将不起作用，因为组件的拼写不正确。当您知道自己在寻找什么时，就很容易被发现。

Answer 6

我认为问题出在这里 1：https://thegta5android.com/

import {Typeahead, Fragment, Control } from ['react-typeahea][1]d'[;][1]

Typeahead可以导入，但是我认为Fragment和Control是错误的根源。您能尝试删除它们并查看吗？

检查`App`的渲染方法

6 个答案:

检查导入语句

检查组件的拼写