无法对未安装的组件执行 React 状态更新? [英] Can't perform a React state update on an unmounted component?

问题描述

我在 componentDidMount 中获取数据并更新状态，出现了著名的警告:

<块引用>

无法对卸载的组件执行 React 状态更新.这是无操作，但它表示您的应用程序中存在内存泄漏.修理，取消所有订阅和异步任务componentWillUnmount 方法.

state = {帖子:空}使成为() {控制台日志(this.props.postId)如果(this.props.post){返回 (<div><h3>{this.state.post.postTitle} </h3><p>{this.state.post.postBody} </p>

);} 别的 {return <Redirect to="/blog"/>}}componentDidMount() {this._isMounted = true;公理.get('https://jsonplaceholder.typicode.com/posts/' + + this.props.postId).then((响应) => {让帖子= {id: response.data.id,帖子标题:response.data.title，postBody: response.data.body}this.setState((prevState,props)=>{console.log('post',post)console.log('prevState',prevState)console.log('道具',道具)})}).catch((e) => {console.log('错误', e)})}

}

导致此警告的原因是什么?获取数据和更新状态的最佳方法是什么?

解决方案

你的问题和下面一样 问题.

组件是怎么开发的，可以进入一个循环，无限执行render.为了防止它，再添加一个状态和控件，使请求只发出 1 次或那些需要但注意"的请求.

此外，您的代码需要进行一些更改，您可以使用状态来验证是否显示某些内容，并在发出请求后再次设置状态.通过一些更改，您的代码可能如下所示:

state = {加载数据:真，帖子:空}使成为() {如果(！this.state.loadingData){返回 (<div><h3>{this.state.post.postTitle} </h3><p>{this.state.post.postBody} </p>

);} 别的 {return <Redirect to="/blog"/>}}componentDidMount() {this._isMounted = true;如果(this.state.loadingData)公理.get('https://jsonplaceholder.typicode.com/posts/' + + this.props.postId).then((响应) => {this.setState({加载数据:假，邮政: {id: response.data.id,帖子标题:response.data.title，postBody: response.data.body}})}).catch((e) => {console.log('错误', e)})}

希望有用.问候

I am fetching data in componentDidMount and updating the state and the famous warning is appearing:

Can't perform a React state update 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.

state = {
    post: null
}

render() {
    console.log(this.props.postId)
    if (this.props.post) {
        return (
            <div>
                <h3> {this.state.post.postTitle} </h3>
                <p> {this.state.post.postBody} </p>
            </div>

        );
    } else {
        return <Redirect to="/blog" />
    }
}
componentDidMount() {
    this._isMounted = true;
    axios
        .get('https://jsonplaceholder.typicode.com/posts/' + + this.props.postId)
        .then((response) => {
            let post = {
                id: response.data.id,
                postTitle: response.data.title,
                postBody: response.data.body
            }
            this.setState((prevState,props)=>{
                console.log('post',post)
                console.log('prevState',prevState)
                console.log('props',props)
            })
        })
        .catch((e) => {
            console.log('error', e)
        })
}

}

What is causing this warning and what is the best way to fetch the data and update the state?

解决方案

Your question is the same as the following question.

How the component is developed, you can enter a loop and execute the render infinitely. To prevent it, add one more state and control to make the request only 1 time or those that need but that are "mindful".

Also, your code needs some changes, you can use the State to validate whether to show something or not and once the request is made, set the state again. With some change your code can look like this:

state = {
    loadingData: true,
    post: null
}

render() {
    if (!this.state.loadingData) {
        return (
            <div>
                <h3> {this.state.post.postTitle} </h3>
                <p> {this.state.post.postBody} </p>
            </div>
        );
    } else {
        return <Redirect to="/blog" />
    }
}
componentDidMount() {
    this._isMounted = true;
    if(this.state.loadingData)
        axios
            .get('https://jsonplaceholder.typicode.com/posts/' + + this.props.postId)
            .then((response) => {
                this.setState({
                    loadingData: false,
                    post: {
                        id: response.data.id,
                        postTitle: response.data.title,
                        postBody: response.data.body
                    }
                })
        })
        .catch((e) => {
            console.log('error', e)
        })
}

I hope it's useful. Regards

这篇关于无法对未安装的组件执行 React 状态更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！