Javascript 反应和TS范围/设置状态警告

我有一个相当简单的react/redux应用程序（）。我基本上有一个简单的web表单和一对onChange处理程序。两者都发出了同样的警告

警告：设置状态（…）：只能更新已装入的 或安装组件。这通常意味着您在 未安装的组件

组件本身很简单——我已经粘贴了下面的代码。我使用了TS anonymous（）=>{}语法来绕过

这个

的范围

出于某种原因，当我在

componentDidMount

中记录

this

时，它会显示为

\u reactInternalInstance=reactComponentWrapper

。onChange处理程序中记录的

this

没有该属性

同样奇怪的是，

componentDidMount

中的

\uuuu proto\uuuu

的

是
Login
（正如预期的那样），但在回调处理程序中，它是
ReactComponent

这两种情况都让我相信这实际上是一个范围问题，但我一辈子都看不出我错在哪里。以前有人见过这个吗

import * as React from 'react';
import {connect} from 'react-redux';
import {FormControl, Button} from 'react-bootstrap';
import {IAppState} from '../store/IAppState';
import AuthActions from '../actions/AuthActions';

interface ILoginProps {
}
interface ILoginState {
    username: string;
    password: string;
}

export class Login extends React.Component<ILoginProps, ILoginState> {
    static propTypes = {};
    state = {
        username: '',
        password: ''
    };

    componentDidMount() {
        console.log('mounted');
        console.log(this);
    }

    usernameChange = (event: any): void => {
        console.log(this);
        this.setState({
            username: event.target.value,
            password: this.state.password
        });
    }

    passwordChange = (event: any): void => {
        this.setState({
            username: this.state.username,
            password: event.target.value
        });
    }

    login = (event: any): void => {
        event.preventDefault();
        console.log('login');
        console.log(this.state);
    }

    render() {
        return (
            <p>
                LOGIN
                <FormControl
                    type='text'
                    value={this.state.username}
                    placeholder='username'
                    onChange={this.usernameChange}
                />
                <FormControl
                    type='text'
                    value={this.state.password}
                    placeholder='password'
                    onChange={this.passwordChange}
                />
                <Button bsStyle='primary' onClick={this.login}>+</Button>
            </p>
        );
    }
}

export function mapStateToProps(state: IAppState) {
    return {};
}

export default connect(mapStateToProps, AuthActions)(Login);

import*as React from'React'；
从'react redux'导入{connect}；
从“react bootstrap”导入{FormControl，Button}；
从“../store/IAppState”导入{IAppState}；
从“../actions/AuthActions”导入AuthActions；
界面ILoginProps{
}
接口碘人参酸盐{
用户名：字符串；
密码：字符串；
}
导出类登录扩展React.Component{
静态propTypes={}；
状态={
用户名：“”，
密码：“”
};
componentDidMount（）{
console.log（'mounted'）；
console.log（this）；
}
usernameChange=（事件：任意）：void=>{
console.log（this）；
这是我的国家({
用户名：event.target.value，
密码：this.state.password
});
}
passwordChange=（事件：any）：void=>{
这是我的国家({
用户名：this.state.username，
密码：event.target.value
});
}
登录=（事件：任意）：无效=>{
event.preventDefault（）；
log（'login'）；
console.log（this.state）；
}
render（）{
返回(

登录
+

);
}
}
导出函数MapStateTops（状态：IAppState）{
返回{}；
}
导出默认连接（MapStateTops、AuthActions）（登录）；
TypeScript是否支持将类方法定义为箭头函数？ES6中的“普通”类方法不会自动绑定到实例。stage 2类属性语法允许您将方法定义为箭头函数，然后自动绑定，但我不知道TS如何处理事情。它像stage 2一样处理它们，它们是自动绑定的。我看到了这里发布的示例与repo中的代码之间的一些差异。看看repo版本，您绝对不应该试图绑定
render（）
。React确保使用适当的
this
调用所有生命周期方法。除此之外，我还不确定到底发生了什么。