Javascript 导出组件时是否丢失了某些内容？

希望你能为我可能遗漏/忽略的事情提供一些新的视角。 我目前正在使用React创建一个天气应用程序，由于添加了导航栏组件，我得到了错误： 元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

检查

App

的渲染方法

然而，我确实导出了我的组件，并在index.js和app.js中导入了它们……我想知道我可能忽略了什么？谢谢你的帮助

我检查了创建的每个组件，看看是否遗漏了导出任何组件，但它们都很好。我还检查了在尝试导入路径或文件夹时是否没有从正确的路径或文件夹进行导入，但它们没有问题。我想我的导航栏组件或应用程序组件可能有问题

//This is my Navbar Comp

import React, { Component } from 'react';
import './Navbar.css';
import SearchBox from '../SearchBox';
import UnitComponent from '../UnitComponent';

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <nav>
        <ul className="navbar-container">
          <li className="navbar-list-item">
            <SearchBox />
          </li>
          <li className="navbar-list-item city-name">
            <span className="">New York,US</span>
          </li>
          <li className="navbar-list-item">
            <UnitComponent />
          </li>
        </ul>
      </nav>
    );
  }
}

export default Navbar;

//这是我的导航栏组件
从“React”导入React，{Component}；
导入“/Navbar.css”；
从“../SearchBox”导入SearchBox；
从“../UnitComponent”导入UnitComponent；
类导航栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(




美国纽约




);
}
}
导出默认导航栏；

//index.js
从“React”导入React；
从“react dom”导入react dom；
导入“/style.css”；
从“./components/App”导入应用程序；
const ROOT_NODE=document.getElementById（'ROOT'）；
render（，根节点）；

//app.js
从“React”导入React，{Component}；
从“../Navbar”导入Navbar；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
天气应用程序
)
}
}
导出默认应用程序；

//搜索框组件
从“React”导入React，{Component}；
导入“./SearchBox.css”；
类SearchBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
查询字符串：“”
};
}
handleQueryStringChange=（e）=>{
这是我的国家({
查询字符串：e.target.value
})
}
handleSearch=（e）=>{
e、 预防默认值（）；
log（'Fetch weather data for:'，this.state.queryString）；
}
render（）{
返回(
);
}
}
导出默认搜索框；

//单元组件
从“React”导入React，{Component}；
导入“./UnitComponent.css”；
类UnitComponent扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
单位：C
};
}
变更单位=（e）=>{
const newUnit=e.target.textContent；
这是我的国家({
单位：新单位
})
}
render（）{
返回(
C
F
)
}
}
导出默认单元组件；
[！[文件夹结构][1][1]
[1]: https://i.stack.imgur.com/UWcyc.png
^^在每个组件文件夹中，都有Navbar.css、Navbar.jsx、index.js等文件

您可能有错误的导入路径。演示是使用您的代码片段编写的。它工作正常，没有任何问题。

可能是您有错误的导入路径。演示是使用您的代码片段编写的。它工作正常，没有任何问题。

请同时显示SearchBox和UnitComponent，它们也可能会导致问题。@AlexanderStaroselsky ok我添加了它：如果您有权在浏览器中访问调试器，请尝试将调试器语句放在渲染方法中，这样您就可以知道什么时候导致了问题，然后在解决问题后删除它们。请共享您的文件结构好吗？正如@teimurjan在他的回答中所建议的，这可能是错误的导入路径。每个组件都在一个文件夹中吗？或者它们都在同一个目录中的平面结构中与

App

并排吗？@AlexanderStaroselsky当然，我添加了它。由于某些原因，编辑器对我有点不对劲，所以您必须将imgur链接复制到搜索栏中，对不起，请同时显示SearchBox和UnitComponent，它们也可能会导致问题。@AlexanderStaroselsky ok我添加了它：如果您有权访问浏览器中的调试器，尝试将调试器语句放在渲染方法中，这样您就可以知道何时是调试器语句导致了问题，然后在修复问题后将其删除。请共享您的文件结构好吗？正如@teimurjan在他的回答中所建议的，这可能是错误的导入路径。每个组件都在一个文件夹中吗？或者它们都在同一个目录中的平面结构中与

App

并排吗？@AlexanderStaroselsky当然，我添加了它。由于某种原因，编辑对我有意见，所以你必须将imgur链接复制到搜索栏中，对不起

//index.js

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


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

//app.js
import React, { Component } from 'react';
import Navbar from '../Navbar';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div> 
        <span><i className="fab fa-react"></i></span>
        <span>Weather App</span>
        <span><i className="wi wi-day-sunny"></i></span>
        <Navbar />
      </div>
    )
  }
}
export default App;

//SearchBox Component

import React, { Component } from 'react';
import './SearchBox.css';



class SearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queryString: ''
    };
  }

  handleQueryStringChange = (e) => {
  this.setState({
    queryString: e.target.value
  })
}

handleSearch = (e) => {
  e.preventDefault();
  console.log('Fetch weather data for:', this.state.queryString);
}

  render() {
    return (
      <div className="form-container">
        <form>
          <input
            type="search"
            value={this.state.queryString}
            name="searchBox"
            id="searchBox"
            placeholder="Enter City or Zipcode" />
          <span className="search-button fa fa-search"></span>
        </form>
      </div>
    );
  }
}

export default SearchBox;

//UnitComponent

import React, { Component } from 'react';
import './UnitComponent.css';

class UnitComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      unit: 'C'
    };
  }

  changeUnit = (e) => {
    const newUnit = e.target.textContent;
    this.setState({
      unit: newUnit
    })
  }
  render() {
    return (
      <div className="unit-container">
        <span className={`unit-value ${this.state.unit === 'C' ? 'active-unit' : ''}`} onClick={this.changeUnit}>C</span>
        <span className={`unit-value ${this.state.unit === 'F' ? 'active-unit' : ''}`} onClick={this.changeUnit}>F</span>
      </div>
      )
  }
}

export default UnitComponent;


[![Folder structure][1]][1]


  [1]: https://i.stack.imgur.com/UWcyc.png
^^in each component folder, there are files such as Navbar.css, Navbar.jsx, index.js