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

Question

我得到了一个错误：

错误:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但是: object。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查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();

Answer 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的图像

​