我不明白我的 React 警告 "can't call setstate on an unmounted component" 来自哪里

Question

所以我有以下代码：

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

其中 this.requestAuth 首先发送一个 post 请求，并且在成功反馈后 - 使用我的消费者中的操作事件将状态设置为 'true'。但是，我发现 - 在经历之后 - 在 < UserConsumer > 中包装我的 < span > 后我总是得到以下错误：

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in Login (at 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 警告 "can't call setstate on an unmounted component" 来自哪里

I don't understand where my React warning "can't call setstate on an unmounted component" comes from

warnings

setstate

reactjs