无法在已卸载的组件上执行React状态更新？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请在componentWillUnmount方法中取消所有订阅和异步任务。

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)
        })
}

}

是什么导致此警告，以及获取数据和更新状态的最佳方法是什么？

回答：

您的问题与以下问题相同。

如何开发组件，您可以进入循环并无限执行渲染。为了防止这种情况，请增加一种状态和控制，以使请求仅发出1次，或者仅在需要时发出“正念”请求。

另外，您的代码需要进行一些更改，您可以使用State来验证是否显示某些内容，并在发出请求后再次设置State。经过一些更改，您的代码可以如下所示：

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)
        })
}

我希望它有用。问候

以上是 无法在已卸载的组件上执行React状态更新？ 的全部内容， 来源链接： utcz.com/qa/429437.html

回到顶部