无法使用componentDidMount从API提取数据：无法在已卸载的组件上调用setState（或forceUpdate）

Question

I'm relatively new to React. I've used it for building a very simple app. I'm trying to add a small feature, but running into following error message. I don't quite understand the root cause yet.

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.

Here's what I'm trying to do. My app has a backend server that provides various APIs, which returns JSON. I'm using React as frontend/client that calls those APIs and renders them.

I have a Parent component named MyReport which uses componentDidMount to call an API to fetch some data. Then in the render method, I pass the data to another component named MyReportViewer . This component has various other child components such as a Calendar that allows selecting date, a component that shows the data in a table format, a component that shows the same data as a chart.

Now I'm trying to add another child component called MyReportSummary that will be displayed alongside the other components rendered by MyReportViewer .

MyReportSummary needs to call another API to fetch some data. This is what it looks like:

import React, { Component } from 'react';

class MyReportSummary extends Component {

    constructor(props) {
        super(props);
        this.state = {
            projectInfo: null,
            isLoading: false,
            error: null
        };
    }

    componentDidMount() {
        this.setState({ isLoading: true });

        let projectInfoApi;

        projectInfoApi = '/api/projects/' + this.props.projectId;

        fetch(projectInfoApi)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Encountered problem fetching project info')
                }
            })
            .then(data => this.setState({
                projectInfo: data
            }))
            .catch(fetchError => this.setState({
                isLoading: false,
                error: fetchError
            }));
    }

    componentWillUnmount() {
        // this.setState({
        //     projectInfo: null
        // });
    }

    render() {
        const { isLoading, error } = this.state;

        if (error) {
            return <p>{error.message}</p>
        }

        if (isLoading) {
            return <p>Loading...</p>
        }

        return (
            <div className="myReportSummary">
                 Summary of Project name: {projectInfo.name}                    
                 Number of events: {this.props.data.length}
            </div>
        );
  }
}

export default MyReportSummary;

I've read that I need to use componentWillUnmount to reset everything, but I'm not sure what exactly I need to reset here and why in this case I need to do it because I don't think I'm trying to change the component after it's been loaded or rendered already.

Answer 1

The warning indicates that your component has been unmounted before you get a chance to handle the response of your fetch.

You can keep a property on your component outside of state called eg isMounted and set that to false in componentWillUnmount and check if it's true when your fetch has completed:

Example

class MyReportSummary extends Component {
  mounted = true;
  state = {
    projectInfo: null,
    isLoading: true,
    error: null
  };

  componentDidMount() {
    fetch(`/api/projects/${this.props.projectId}`)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Encountered problem fetching project info");
        }
      })
      .then(data => {
        if (this.mounted) {
          this.setState({
            projectInfo: data
          });
        }
      })
      .catch(fetchError => {
        if (this.mounted) {
          this.setState({
            isLoading: false,
            error: fetchError
          });
        }
      });
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    const { isLoading, error, projectInfo } = this.state;

    if (error) {
      return <p>{error.message}</p>;
    }

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div className="myReportSummary">
        Summary of Project name: {projectInfo.name}
        Number of events: {this.props.data.length}
      </div>
    );
  }
}