面试题：React中如何在生命周期方法中处理异步操作

Question

请描述在React的`componentDidMount`生命周期方法中发起异步请求（例如使用`fetch`获取数据），并将数据正确设置到组件状态的完整流程，同时说明如果在异步操作未完成时组件卸载，如何避免`setState`导致的错误。

Answer 1

1. 在componentDidMount中发起异步请求并设置状态流程：
   • 首先，在componentDidMount生命周期方法内使用fetch发起异步请求。例如：

import React, { Component } from'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }
  componentDidMount() {
    fetch('your - api - url')
    .then(response => response.json())
    .then(data => {
        this.setState({
          data: data
        });
      });
  }
  render() {
    return (
      <div>
        {this.state.data? <p>{JSON.stringify(this.state.data)}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export default MyComponent;

• 这里fetch返回一个Promise，通过.then链式调用处理响应数据，将解析后的数据使用setState设置到组件状态this.state.data。

2. 处理异步操作未完成时组件卸载避免setState错误：
   • 可以在组件中定义一个标识变量，例如isMounted，在componentDidMount中初始化为true，在componentWillUnmount中将其设置为false。
   • 在fetch的.then回调中，先检查isMounted，如果为true再执行setState。修改后的代码如下：

import React, { Component } from'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
    this.isMounted = false;
  }
  componentDidMount() {
    this.isMounted = true;
    fetch('your - api - url')
    .then(response => response.json())
    .then(data => {
        if (this.isMounted) {
          this.setState({
            data: data
          });
        }
      });
  }
  componentWillUnmount() {
    this.isMounted = false;
  }
  render() {
    return (
      <div>
        {this.state.data? <p>{JSON.stringify(this.state.data)}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export default MyComponent;

这样，当组件在异步操作未完成时卸载，isMounted会变为false，从而避免在已卸载的组件上执行setState导致的错误。