类型错误:react__WEBPACK_IMPORTED_MODULE_2___default(...) 不是函数.我该如何解决这个问题? [英] TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function. How do I solve this?

问题描述

我在使用 React 时出现以下错误.

I was using React when I got the following error.

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

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

How do I solve this? I have added the code below.

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 要求我添加更多细节，因为我的问题主要是代码.对不起.

PS: I am typing this because StackOverflow is asking me to add some more details as my question is mostly code. Sorry.

推荐答案

我只是要指出您要从react"库导入两次

I am just going to point out you are importing from "react" lib twice

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

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

Here, you are literally importing (export default react) from the entire React lib and simply naming it a random string useState and then trying to use that how you use the real React.useState() api/method.

所以你试图以这种方式像实际的 React useState api 一样使用 useState 绝对会导致错误，因为你基本上是在说这个 require('react')() 当您导入 react lib 的默认导入与属于该默认导出一部分的 api 时，或者它本身就是一个导出时，您需要从导入语句中的 lib 进行解构，不确定是否相关，但您 100% 格式错误代码我不敢相信没人提到这个?

So you trying to use useState like the actual React useState api in this manner will absolutely cause an error because you are basically saying this require('react')() when you import the default import of react lib versus an api that is part of that default export, or it is itself an export in which you need to deconstruct from the lib in the import statement, not sure related but you 100% have malformed code I cannot believe no one even mentioned this?

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

For further example, for it to work as you have it (although eslint should be screaming about duplicate imports by now before you even hit save) you would have to do useState.useState(), which clearly is not what you want. Some people don't mind React.useState() but I personally will shun you haha jk, but destruct from import!!! please (:

使用最佳编码标准是成为团队中优秀软件工程师的关键，甚至出于所有原因，在您自己的个人项目中也是如此，并且绝对会增加您的DX和整体输出.

Using Best Coding Standards is key to being a great software engineer on a team and even in your own personal projects for all of the reasons, and will absolutely increase your DX and output overall.

希望这对我的兄弟有所帮助.我们都经历过这些小怪癖，一旦你学会了，把它添加到你的我肯定知道的事情"列表中并继续前进

Hope this helped my dude. We all have gone through these little quirks that once you learn, add that to your "things I know for sure" list and keep trucking

这篇关于类型错误:react__WEBPACK_IMPORTED_MODULE_2___default(...) 不是函数.我该如何解决这个问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！