Question

这是完整的错误：

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.

这是导出的HeaderSearchBox.js文件中的代码：

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;

这是我试图将HeaderSearchBox导入到的头文件中的代码：

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;

我尝试删除默认的导出并使用花括号，并且我还确保导入和导出的名称都相同。我很迷惑，不胜感激

Answer 1

您在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>

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

1 个答案: