修复 React 的“在未安装的组件上调用 SetState()”错误

看到Called setState() on an Unmounted Component在您的控制台是面对新人反应最常见的问题之一。当您使用类组件时，您可以轻松地创建遇到此错误的情况。

更新已从 DOM 中删除的组件的状态通常表明您的应用程序存在内存泄漏。这会浪费用户的硬件资源，如果不加以控制，将导致性能逐渐下降。这就是发生错误的原因以及您可以采取的措施来解决它。

一个简单的组件

这是一个基本的 React 组件，它通过网络获取一些数据：

import React from "react"; class NewsList extends React.Component {
    
    state = {
    
        news: null     }; 
 
    componentDidMount() {
   
        fetch("http://example.com/news.json").then(res => {
   
            this.setState({
   news: response.json()});
        }).catch(e => {
   
            alert("Error!");
        });
    } 
 
    render() {
   
        if (!this.state.news) return "Loading...";
        else return news.map((story, key) => <h1 key={
   key}>{
   story.Headline}</h1>