类型错误：react__WEBPACK_IMPORTED_MODULE_2___default(...) 不是函数。我该如何解决这个问题？

Question

当我收到以下错误时，我正在使用 React。

TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

我该如何解决这个问题？我已经添加了下面的代码。

import React from 'react';
import LoginForm from './loginForm'
import useState from "react"

function LoginPage(){
    const[details, setDetails] = useState({
        username: '',
        password: ''
    });
    function handleChange(event){
        const updatedDetails = {...details, [event.target.name]: event.target.value};
        setDetails(updatedDetails)
    }
    return(<LoginForm details={details} onChange={handleChange}/>)
};

export default LoginPage;

另一个组件是：-

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Jumbotron, Container } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

function FormPage(props){
  return (
    <Jumbotron fluid>
    <Container fluid>
    <center><h1 className="display-3"> Log IN</h1></center>
    <p className="lead">Please Enter your Details Here</p>
    </Container><br />
    <Container fluid>
    <Form>
        <FormGroup>
            <Label for="username">Username</Label>
            <Input type="textarea" name="username" id="username" placeholder="Enter your Username Here" value={props.details.username} onChange={props.onChange}></Input>
        </FormGroup>
        <FormGroup>
            <Label for="password">Password</Label>
            <Input type="password" name="password" id="password" placeholder="Enter your Password Here" value={props.details.username} onChange={props.onChange}></Input>
        </FormGroup>
        <Button color="success">Submit</Button>
    </Form>
    </Container>
    </Jumbotron>
  );
};

export default FormPage;

PS：我输入这个是因为 StackOverflow 要求我添加更多细节，因为我的问题主要是代码。对不起。

Answer 1

我只是想指出你从“react”库导入两次

// You have: (look closely at libs you are importing from and how)
import React from 'react';
import LoginForm from './loginForm'
import useState from "react"

// Should be:
import React, { useState } from 'react';
import LoginForm from './loginForm'

// Why?
// Because useState is one of React libs' export default's apis / methods
// aka useState is just a part of the React default export but also is itself, an export
// React.useState() is how it would look if you just imported the React lib itself and nothing else
// how I personally handle any react apis is via ==> 
import React, { useState } from 'react

// apart from loving seeing all libraries and individual apis imported 
// as soon as I see a file to get a sense of its potential functionalities, 
// read my detailed explanation below

在这里，您实际上是export default react从整个 React 库导入 () 并简单地将其命名为一个随机字符串 useState，然后尝试使用它来使用真正的React.useState()api/方法。

因此，您尝试以这种方式像实际的 React api 一样使用 useStateuseState绝对会导致错误，因为require('react')()当您导入 React lib 的默认导入而不是作为该默认导出的一部分的 api 时，或者它本身就是一个 api 时，您基本上是在这么说。导出其中您需要从导入语句中的库解构，不确定是否相关，但您100％有格式错误的代码我不敢相信甚至没有人提到这一点？

进一步的例子，为了让它像你拥有的那样工作（尽管 eslint 应该在你点击保存之前尖叫重复导入）你必须这样做useState.useState()，这显然不是你想要的。有些人不介意React.useState()，但我个人会避开你哈哈jk，但是从导入中破坏！请 （：

出于各种原因，使用最佳编码标准是成为团队中甚至您自己的个人项目中优秀软件工程师的关键，并且绝对会提高您的 DX 和总体输出。

希望这对我的兄弟有帮助。我们都经历过这些小怪癖，一旦您学会了，请将其添加到您的“我确定知道的事情”列表中并继续运输