javascript - react 应用程序。无法在尚未安装的组件上调用 setState

标签 javascript reactjs

当我尝试更改输入字段上的值时收到以下警告。

Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Login component.

我不明白为什么会发生这种情况,但在我的任何其他 React 页面上都没有发生。

唯一的区别是这是登录页面,因此有自己的页面路由。

有人可以帮忙吗?我已将我的组件剥离回最基本的结构,看看是否有人能发现我做错了什么。

import React, { Component } from 'react';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    render() {
        const { username } = this.state;

        return (
            <input type="text" placeholder="Email" className="form-control" name="username" autoComplete="email" value={username} onChange={this.onChange} />
        );
    }
}

export default Login;

最佳答案

问题不是因为我的组件,而是因为我更改了我的 webpack 配置以支持 async await es7 功能。到以下...

"presets": [ "es2017" , "stage-0" , "react" ]

相反,我实际上需要做下一个答案并安装

npm install --save-dev regenerator-runtime

https://stackoverflow.com/a/51650116/3284707

从上面的链接中得到答案解决了我的问题。

关于javascript - react 应用程序。无法在尚未安装的组件上调用 setState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52092595/

相关文章:

javascript - Django HTML,如何通过 AJAX 传递单选选项选择并加载表单

javascript - 如何让 Javascript 将通过 AJAX 请求提取的 tinyint(1) 数据视为 boolean 值?

reactjs - eslint + jsconfig + nextjs 模块路径别名(绝对路径导入 - @)

javascript - react native : functions are not valid as a react child . 如果您返回组件而不是 <component/>,则可能会发生这种情况

javascript - 使用 babel.js 而不是 browserify 编译成 bundle

javascript - 访问已删除然后重新创建的帐户的个人资料照片时,Firebase 返回 "no-referrer-when-downgrade"

javascript - Caman.js 渲染适用于以前的状态而不是 Canvas 的当前状态

javascript - 禁用右键单击表单字段级别

javascript - 调整浏览器大小时,如何使用 jQuery 重新加载 'srcset' 图像?

javascript - ReactJS + Flux - 如何实现 toasts/通知?