Reactjs 获得；元素类型无效：应为字符串（…）”；尝试使用React引导输入组时

我正在尝试使用来自的“InputGroup”。但是，当我使用InputGroup.Prepend时，会出现一个错误，错误是：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

我从有类似问题的人那里了解到，默认的导出方法或某些导入可能导致这些行为。然而，将这些解决方案应用于这个问题并没有产生预期的结果

这是我的“test.js”

import React，{Component}来自“React”；
从“react bootstrap”导入{FormControl，InputGroup}；
导出默认类测试扩展组件{
render（）{
返回(
@
);
}
}

还有我的App.js

import React, { useState, useEffect } from "react";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
import { Nav, Navbar, NavItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Routes from "./Routes";
import "./App.css";

function App(props) {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }
    setIsAuthenticating(false);
  }

  async function handleLogout() {
    await Auth.signOut();

    userHasAuthenticated(false);

    props.history.push("/login");
  }

  return (
    !isAuthenticating && (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {isAuthenticated ? (
                <>
                  <LinkContainer to="/settings">
                    <NavItem>Settings</NavItem>
                  </LinkContainer>
                  <NavItem onClick={handleLogout}>Logout</NavItem>
                </>
              ) : (
                <>
                  <LinkContainer to="/signup">
                    <NavItem>Signup</NavItem>
                  </LinkContainer>
                  <LinkContainer to="/login">
                    <NavItem>Login</NavItem>
                  </LinkContainer>
                </>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Routes appProps={{ isAuthenticated, userHasAuthenticated }} />
      </div>
    )
  );
}

export default withRouter(App);

import React，{useState，useffect}来自“React”；
从“aws放大”导入{Auth}；
从“react router dom”导入{Link，withRouter}；
从“react bootstrap”导入{Nav、Navbar、NavItem}；
从“react router bootstrap”导入{LinkContainer}；
从“/Routes”导入路由；
导入“/App.css”；
功能应用程序（道具）{
const[IsAuthentication，SetIsAuthentication]=useState（true）；
const[isAuthenticated，userHasAuthenticated]=useState（false）；
useffect（（）=>{
onLoad（）；
}, []);
异步函数onLoad（）{
试一试{
等待Auth.currentSession（）；
userHasAuthenticated（true）；
}
捕获（e）{
如果（e！=‘无当前用户’）{
警报（e）；
}
}
SetIsAuthentication（假）；
}
异步函数handleLogout（）{
等待Auth.signOut（）；
userHasAuthenticated（false）；
props.history.push（“/login”）；
}
返回(
！正在验证&&(
划痕
{是否已验证(
设置
注销
) : (
报名
登录
)}
)
);
}
使用路由器（App）导出默认值；

我做错了什么

---

谢谢。

解决方案是使用我正在使用的引导程序的正确版本的文档。我需要的文档。

应该是未定义的。它存在吗？感觉它就在

旁边，但我不知道框架，事实上，这个项目中似乎有一些不匹配的引导版本。目前正在努力使一切都跟上速度。将在我完成时更新。

import React, { useState, useEffect } from "react";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
import { Nav, Navbar, NavItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Routes from "./Routes";
import "./App.css";

function App(props) {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }
    setIsAuthenticating(false);
  }

  async function handleLogout() {
    await Auth.signOut();

    userHasAuthenticated(false);

    props.history.push("/login");
  }

  return (
    !isAuthenticating && (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {isAuthenticated ? (
                <>
                  <LinkContainer to="/settings">
                    <NavItem>Settings</NavItem>
                  </LinkContainer>
                  <NavItem onClick={handleLogout}>Logout</NavItem>
                </>
              ) : (
                <>
                  <LinkContainer to="/signup">
                    <NavItem>Signup</NavItem>
                  </LinkContainer>
                  <LinkContainer to="/login">
                    <NavItem>Login</NavItem>
                  </LinkContainer>
                </>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Routes appProps={{ isAuthenticated, userHasAuthenticated }} />
      </div>
    )
  );
}

export default withRouter(App);