Question

您好，请告诉我最佳做法！

我需要两个简单的操作，从API获取数据，并将数据设置为state。我读到我可以在componentDidMount中执行API请求，但是在此功能中我无法设置状态。

实际上，如果我采用这种方法，则所有方法都可以正常工作，但是如果尝试重新加载页面，则会出现此错误：

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

componentDidMount = () => {
  this.getData();
}

getData = async () => {
  try {
    // Get data from api
    const fund = await axios.get(
      APIEnpoint + "api/smartfund/" + this.props.match.params.address
    );
    this.setState({
      smartFundAddress: fund.data.result.address,
      name: fund.data.result.name,
      balance: JSON.parse(fund.data.result.balance)
    });
  } catch (error) {
    // Catch any errors for any of the above operations.
    alert(`can't get data`);
    console.error(error);
  }
}

Answer 1

问题在于，您正在尝试卸载组件后设置状态。因此，为防止发生这种情况，请尝试以下一种方法：

    _isMounted = false;

    componentDidMount(){
        this._isMounted = true;
    }

    componentWillUnmount(){
        this._isMounted = false;
    }

getData = async () => {
  try {
    // Get data from api
    const fund = await axios.get(
      APIEnpoint + "api/smartfund/" + this.props.match.params.address
    );
    if(this._isMounted)
    {
        this.setState({
            smartFundAddress: fund.data.result.address,
            name: fund.data.result.name,
            balance: JSON.parse(fund.data.result.balance)
          });
    }
  } catch (error) {
    // Catch any errors for any of the above operations.
    alert(`can't get data`);
    console.error(error);
  }
}

因此，如果卸载了组件，则不会尝试更新状态

如何正确调用setState？

1 个答案: