我在导出组件时丢失了什么吗？

Question

hope you can provide some fresh eyes for something I probably missed out/overlooked. I am currently creating a weather app with React and since adding in Navbar component, I got the error: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App ."

However, I did export my components and imported them in index.js and app.js...I'm wondering what I possibly overlooked? Thank you for the help!

I've looked over every component created to see if I missed out on exporting any components, but they are all fine. I also checked to see if maybe I'm not importing from the right paths or folders when I try importing them, but they are fine. I'm thinking there's something either wrong with my Navbar component or App component.

//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;

//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

Answer 1

Probably, you have wrong import paths. Here is the demo written using your code snippets. It's working without any concerns.