index.js:1 警告：React.createElement：类型无效

Question

here is the full error:

index.js:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

here's the code from the exported HeaderSearchBox.js file:

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

const HeaderSearchBox = ({ history }) => {
 const [keyword, setKeyword] = useState('');

 const submitHandler = (e) => {
 e.preventDefault();
 if (keyword.trim()) {
  history.push(`/search/${keyword}`);
 } else {
  history.push('/');
}
};

return (
  <Form onSubmit={submitHandler} inline>
    <Form.Conrol
      type='text'
      name='q'
      onChange={(e) => setKeyword(e.target.value)}
      placeholder='Search Products.'
      className='mr-sm-2 ml-sm-5'
    ></Form.Conrol>
    <Button type='submit' variant='outline-success' className='p-2'>
      Search
    </Button>
  </Form>
  );
 };

 export default HeaderSearchBox;

and here is the code from the header file I'm trying to import the HeaderSearchBox to:

import React from 'react';
import { Route } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux';
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap';
import HeaderSearchBox from './HeaderSearchBox';
import { logout } from '../actions/userActions';


const Header = () => {
  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  const dispatch = useDispatch();

  const logoutHandler = () => {
    dispatch(logout());
  };

  return (
    <header>
      <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
        <Container>
          <LinkContainer to='/'>
            <Navbar.Brand>Shop</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
          <Route render={({ history }) => <HeaderSearchBox history={history} />} />
            <Nav className='ml-auto'>
              <LinkContainer to='/cart'>
                <Nav.Link>
                  <i className='fas fa-shopping-cart'></i> Cart
                </Nav.Link>
              </LinkContainer>
              {userInfo ? (
                <NavDropdown title={userInfo.name} id='username'>
                  <LinkContainer to='/profile'>
                    <NavDropdown.Item>Profile</NavDropdown.Item>
                  </LinkContainer>
                  <NavDropdown.Item onClick={logoutHandler}>
                    Logout
                  </NavDropdown.Item>
                </NavDropdown>
              ) : (
                <LinkContainer to='/login'>
                  <Nav.Link>
                    <i className='fas fa-user'></i> Sign in
                  </Nav.Link>
                </LinkContainer>
              )}
              {userInfo && userInfo.isAdmin && (
                <NavDropdown title='Admin' id='adminMenu'>
                  <LinkContainer to='/admin/userlist'>
                    <NavDropdown.Item>Users</NavDropdown.Item>
                  </LinkContainer>
                  <LinkContainer to='/admin/productlist'>
                    <NavDropdown.Item>Products</NavDropdown.Item>
                  </LinkContainer>
                  <LinkContainer to='/admin/orderlist'>
                    <NavDropdown.Item>Orders</NavDropdown.Item>
                  </LinkContainer>
                </NavDropdown>
              )}
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;

I've tried removing the default export and use curly braces, and I also made sure the imports and exports are all named the same. I'm stumped, any help is appreciated

Answer 1

You have typo error here Form.Conrol => Form.Control

<Form.Control
      type='text'
      name='q'
      onChange={(e) => setKeyword(e.target.value)}
      placeholder='Search Products.'
      className='mr-sm-2 ml-sm-5'
    ></Form.Control>