Question

我有一个相当简单的react / redux应用程序（full repo）。我基本上有一个带有一对onChange处理程序的简单Web表单。两人都在发出同样的警告;

警告：setState（...）：只能更新已挂载的或安装组件。这通常意味着你在一个上调用了setState（）未安装的组件。

组件本身很简单 - 我已粘贴下面的代码。我使用了TS anonymous（）=＆gt; {}语法来绕过this的范围。

出于某种原因，当我在this中记录componentDidMount时，会显示_reactInternalInstance=ReactCompositeComponentWrapper。登录onChange处理程序的this没有该属性。

同样奇怪，__proto__中的this componentDidMount为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);

React和TS作用域/ setState警告

0 个答案: