检查`App`的渲染方法

Question

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

查看App的渲染方法。

App.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>
       )
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

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

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

我也遇到了同样的问题。就我而言，是我使用了来自 MobX 的错误 HOC，即 observable 而不是 observer。

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

export default observable(MyReactComponent);

到

export default observer(MyReactComponent);

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

检查导入语句

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

示例：

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 5

我认为问题出在这里：

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

Typeahead 导入没问题，但我认为 Fragment 和 Control 是您的错误的根源。 upi 可以尝试删除它们，看看是否有帮助？