类型错误：（0，_react.default）不是一个函数

Question

\xc2\xa0 我正在为我的应用程序使用codesandbox.io，它返回错误TypeError : (0, _react.default ) 不是函数。这个主要App.js代码工作正常，直到我尝试从 React 导入useState，如下所示。

\n

// The error reference appears on the line that is defined by the isOpen variable and the openSidebar function\n\nimport useState, {React} from "react";\nexport default function App () {\n  const [isOpen, openSidebar] = useState (false);\n  return (\n

\n

\xc2\xa0 isOpen且openSidebar用于

\n

    <Sidebar\n      sidebar = {\n            <>\n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1>\n            </>\n      }\n      open = {isOpen}\n      styles = {{sidebar: {background: "white", height: "100%"}}}\n    >\n      <Button onClick = {openSidebar (! IsOpen)}> Open sidebar </Button>\n    </Sidebar>\n

\n

文件：

\n

import "./styles.css";\n\nimport {Navbar, Nav, Container, Button} from "react-bootstrap";\nimport Sidebar from "react-sidebar";\n\nimport React, {useState} from "react";\n\nexport default function App () {\n\n  const [isOpen, openSidebar] = useState (false);\n\n  return (\n    <div className = "App">\n      <Navbar bg = "dark" style = {{color: "white", zIndex: 100}}>\n        <Container>\n          <Navbar.Brand href = "# home" style = {{color: "gray"}}>\n            home\n          </Navbar.Brand>\n          <Nav className = "me-auto">\n            <Nav.Link href = "# home" style = {{color: "gray"}}>\n              Info\n            </Nav.Link>\n          </Nav>\n        </Container>\n      </Navbar>\n      <div>\n        <Sidebar\n          sidebar = {\n            <>\n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1> \n              <h1> Sidebar content </h1>\n            </>\n          }\n          open = {isOpen}\n          styles = {{sidebar: {background: "white", height: "100%"}}}\n        >\n          <Button onClick = {() => openSidebar(!IsOpen)}> Open sidebar </Button>\n        </Sidebar>\n      </div>\n    </div>\n  );\n}\n

\n

我认为重新启动沙箱可能会修复一些错误。

\n

Answer 1

React是默认导出并且useState是命名导出。因此，将您的导入行更改为

import React, { useState } from 'react';