Question

所以我有以下代码：

<UserConsumer>
{({ actions }) => {
    return (
        <span onClick={() => this.requestAuth(actions)}><MainButton name='Log in' /></span>
    )
}}
</UserConsumer>

this.requestAuth首先在其中发送发布请求，并在成功反馈之后，使用我的使用者中的action事件将状态设置为“ true”。但是，我发现-体验后-将包裹在中后，总是会遇到以下错误：

警告：无法在已卸载的组件上调用setState（或forceUpdate）。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请在componentWillUnmount方法中取消所有订阅和异步任务。登录（在App.js：207）。

但是，我不明白为什么会这样。

这是我完整的Login.js代码：

export default class Login extends Component  {

    constructor (props) {
        super (props)
        this.state = {
            pwVisible : false,
            pwUser: '',
            mailUser: '',
            feedback: null
        }
    }

    requestAuth = (actions) => {
        axios({
            method: 'post',
            url: process.env.REACT_APP_API_AUTH,
            data: {
                username: this.state.mailUser,
                password: this.state.pwUser
            }
        })
        .then(
            (response) => {
                console.log(response)
                this.setState({
                    feedback: "Alright, welcome back! I'm gonna log you in!"
                }, actions.logIn())
            }
        )
        .catch(
            (error) => {
                console.log(error)
                this.setState({
                    feedback: "Sorry, I think your e-mail or password is incorrect. Wanna try again?"
                })
            }
        );

    }
    render () {
        return (
            <div id='login'>
                <div id='loginBox'>
                    {Logo}
                    <form>
                        <input className='input100' value={this.state.mailUser} onChange={thisValue => this.setState({mailUser : thisValue.target.value}) } type='email' name='user' placeholder='firstname.lastname@ondernemersnetwerk.be' />
                        <input className='input100' value={this.state.pwUser} onChange={thisValue => this.setState({pwUser : thisValue.target.value}) } type={this.state.pwVisible? 'text' : 'password'} name='password' placeholder='Password' required />
                        <span className='pwIcon' onClick={this.state.pwVisible ? () => this.setState({pwVisible : false}) : () => this.setState({pwVisible : true})}>
                        {this.state.pwVisible ?
                            <Icon name='Visible' />
                        :
                            <Icon name='Hidden' />
                        }
                        </span>
                        <UserConsumer>
                            {({ actions }) => {
                                return (
                                    <span onClick={() => this.requestAuth(actions)}><MainButton name='Log in' /></span>
                                )
                            }}
                        </UserConsumer>
                    </form> 

                    <div className='gradientBorder'></div>
                </div>
            </div>
        );
    }
};

Answer 1

此警告，因为在组件卸载后调用setState。尝试设置标志_isMounted，并在调用setState之前进行检查：

export default class Login extends Component  {
    _isMounted = false;
    constructor (props) {
        super (props)
        this.state = {
            pwVisible : false,
            pwUser: '',
            mailUser: '',
            feedback: null
        }
    }

    componentDidMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    requestAuth = (actions) => {
        axios({
            method: 'post',
            url: process.env.REACT_APP_API_AUTH,
            data: {
                username: this.state.mailUser,
                password: this.state.pwUser
            }
        })
        .then(
            (response) => {
                console.log(response)
                if (this._isMounted) {
                    this.setState({
                        feedback: "Alright, welcome back! I'm gonna log you in!"
                    }, actions.logIn())
                }
            }
        )
        .catch(
            (error) => {
                console.log(error)
                if (this._isMounted) {
                    this.setState({
                        feedback: "Sorry, I think your e-mail or password is incorrect. Wanna try again?"
                    })
                }
            }
        );

    }
    render () {
        return (
            <div id='login'>
                <div id='loginBox'>
                    {Logo}
                    <form>
                        <input className='input100' value={this.state.mailUser} onChange={thisValue => this.setState({mailUser : thisValue.target.value}) } type='email' name='user' placeholder='firstname.lastname@ondernemersnetwerk.be' />
                        <input className='input100' value={this.state.pwUser} onChange={thisValue => this.setState({pwUser : thisValue.target.value}) } type={this.state.pwVisible? 'text' : 'password'} name='password' placeholder='Password' required />
                        <span className='pwIcon' onClick={this.state.pwVisible ? () => this.setState({pwVisible : false}) : () => this.setState({pwVisible : true})}>
                        {this.state.pwVisible ?
                            <Icon name='Visible' />
                        :
                            <Icon name='Hidden' />
                        }
                        </span>
                        <UserConsumer>
                            {({ actions }) => {
                                return (
                                    <span onClick={() => this.requestAuth(actions)}><MainButton name='Log in' /></span>
                                )
                            }}
                        </UserConsumer>
                    </form> 

                    <div className='gradientBorder'></div>
                </div>
            </div>
        );
    }
};

希望这会有所帮助。

我不明白我的React警告“无法在未安装的组件上调用setstate”来自何处

1 个答案: