codesandbox导入React useState报TypeError: (0, _react.default) is not a function如何解决

• 导入语句写法错误：你最初的导入写法import useState, {React} from "react"完全不符合React的导出规则，React是默认导出项，useState是命名导出项，该写法会将React默认导出的对象赋值给useState变量，你调用useState(false)实际是在调用对象，自然触发「不是函数」的类型错误。即使你后续调整了导入写法，若缓存未清理或者导入顺序错误也可能残留该问题。
• 变量名大小写错误：JavaScript变量大小写敏感，你定义的状态变量为小写i开头的isOpen，但在调用openSidebar时写的是!IsOpen，大写首字母的IsOpen属于未定义变量，也会引发运行时报错。
• （旧代码残留问题）你最初的onClick回调直接写为{openSidebar (! IsOpen)}，会在组件渲染时直接执行状态更新逻辑，而非点击时触发，容易引发死循环，即使后续改成箭头函数，变量名错误的问题仍然存在。

1. 统一修正React导入语句，放到所有第三方包导入的最顶部，写法如下：

import React, { useState } from "react";

2. 修正状态变量的大小写错误，将!IsOpen修改为!isOpen
3. 清理CodeSandbox缓存后重新运行，可删除node_modules后重新安装依赖避免缓存导致的旧错误残留。

import "./styles.css";
import React, { useState } from "react";
import {Navbar, Nav, Container, Button} from "react-bootstrap";
import Sidebar from "react-sidebar";

export default function App () {
  const [isOpen, openSidebar] = useState(false);

  return (
    <div className = "App">
      <Navbar bg = "dark" style = {{color: "white", zIndex: 100}}>
        <Container>
          <Navbar.Brand href = "# home" style = {{color: "gray"}}>
            home
          </Navbar.Brand>
          <Nav className = "me-auto">
            <Nav.Link href = "# home" style = {{color: "gray"}}>
              Info
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <div>
        <Sidebar
          sidebar = {
            <>
              <h1> Sidebar content </h1> 
              <h1> Sidebar content </h1> 
              <h1> Sidebar content </h1> 
              <h1> Sidebar content </h1>
            </>
          }
          open = {isOpen}
          styles = {{sidebar: {background: "white", height: "100%"}}}
        >
          <Button onClick = {() => openSidebar(!isOpen)}> Open sidebar </Button>
        </Sidebar>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者user11717481