Блог

Я использую codesandbox.io для моего приложения, и оно возвращает ошибку TypeError: (0, _react.default) не является функцией. Этот основной App.js код работал нормально, пока я не попытался импортировать useState из react, вот так.

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

Я думаю, что перезапуск песочницы может исправить некоторые ошибки.

React является экспортом по умолчанию и useState именованным экспортом. Поэтому измените строку импорта на

 import React, { useState } from 'react';