reactjs - TypeError: (0, _react.default) 不是函数

Question

  我正在为我的应用程序使用codesandbox.io，它返回错误TypeError : (0, _react.default ) is not a function。App.js在我尝试从反应中导入useState之前，这个主代码运行良好，就像这样。

// The error reference appears on the line that is defined by the isOpen variable and the openSidebar function

import useState, {React} from "react";
export default function App () {
  const [isOpen, openSidebar] = useState (false);
  return (

  isOpen和openSidebar用于

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

文件：

import "./styles.css";

import {Navbar, Nav, Container, Button} from "react-bootstrap";
import Sidebar from "react-sidebar";

import React, {useState} from "react";

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>
  );
}

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

标签： reactjsreact-hooks

Answer 1

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

import React, { useState } from 'react';