如何解决此错误元素类型无效？答案

【问题标题】：how to resolve this error element type is invalid?如何解决此错误元素类型无效？
【发布时间】：2021-05-08 12:38:58
【问题描述】：

我收到此错误：

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

这是我的App.js 代码：

import React, { Component } from 'react';
import Particles from 'react-particles-js';
import Clarifai from 'clarifai';
import './App.css';
import Navigation from './Components/Navigation/Navigation';
import Logo from './Components/Logo/Logo';
import Imagelinkform from './Components/Imagelinkform/Imagelinkform';
import Rank from './Components/Rank/Rank'
import Facerecog from './Components/Facerecog/Facerecog';



const app = new Clarifai.App({
  apiKey: '391e77688a1e40ceaf6264a70543fcc5'
 });


const particlesOptions={  
    particles: {
    number:{
      value:30,
      density:{
        enable:true,
        value_area:800
      }
    }
        }
      }
    

  class App extends Component { 
  constructor(){
    super();
      this.state={
        input:'',
        imageUrl:''
      }
  }
  onInputChange=(event)=>{
    console.log(event.target.value);
  }
  onButtonSubmit=()=>{
    this.setState({imageUrl: this.state.input});
    app.models
      .predict( 
        Clarifai.FACE_DETECT_MODEL,
        this.state.input)
        .then(
          function(response){
            console.log(response.outputs[0].data.region[0].region_info.bounding_box)
          },
          function(err){

          }
        )
  }
render(){
  return (
    <div className="App">
      <Particles  className='particles'
              params={particlesOptions}
               />
   <Navigation/>
   <Logo />
   <Rank />
   <Imagelinkform onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
   
  <Facerecog imageUrl={this.state.imageUrl} />
    </div>
  );
}
}
export default App;

index.js:

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

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

【问题讨论】：

欢迎来到 Stack Overflow！请拿起tour（你会得到一个徽章！），环顾四周，阅读help center，尤其是How do I ask a good question?，我还推荐Jon Skeet的Writing the Perfect Question和Question Checklist。
我怀疑问题出在App 尝试渲染的组件之一，而不是App 本身。请使用 Stack Snippets（[<>] 工具栏按钮）减少问题到minimal reproducible example，最好是可运行。 Stack Snippets 支持 React，包括 JSX； here's how to do one.

标签： javascript reactjs typescript react-native

【解决方案1】：

这是由App.js 中的 JS 文件的导出和导入引起的。确保你在你的应用中做类似的事情

// SomeFile.js

const SomeFile = () => {
....
....
}
export default SomeFile //Default Export

现在在您的 App.js 中

import SomeFile from './SomeFile' // Correct Way
import {SomeFile} from './SomeFile' // Wrong way for default import

来自here 的图片以便更好地理解

【讨论】：