9

当我收到以下错误时，我正在使用 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 要求我添加更多细节，因为我的问题主要是代码。对不起。

4

6 回答 6

5

我只是要指出你从“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/方法。

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

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

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

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

于 2020-05-20T18:32:16.890 回答
1

请添加更多信息。就像您选择导入的 API/模块是什么以及它正在使用什么

export default function

对比

export function

你是怎么消费的？

您可能已将其导入为

import Something from './something';

而您的 something.js 可能看起来像：

export function Something(){
}
于 2019-12-02T15:47:45.967 回答
1

如果您将 webpack 更新到版本 5.xx，那么这可能与output.library 设置问题有关

因此，如果您在 webpack 输出中有库设置，请尝试将其删除：

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'painterro.commonjs2.js',
  library: 'Painterro',  // ⏪ this is the issue
  libraryTarget: 'commonjs2',
 },
于 2021-02-14T20:44:22.387 回答
0

在类似的情况下，我在 Yarn 下运行 Next 时遇到上述错误。当我添加一个新页面时，问题出现了。唯一解决它的是运行 yarn upgrade。

于 2021-07-18T18:18:40.913 回答
0

将代码发布到引发此错误的文件中会很有用。有了这些信息，您可能将某些内容作为默认导入导入，但没有从相关模块默认导出任何内容。尝试调查默认导出并查看其中一个是否没有默认导出。您可以查看模块文档。

于 2019-12-02T15:51:23.710 回答
-1

安装新软件包后，您可能还没有重新运行该项目

于 2021-11-16T09:08:26.397 回答