触发新更新时，如何在 componentDidUpdate 中等待或取消数据更新？

Question

我的问题

componentDidUpdate如果 props 发生变化，我正在使用它来获取数据并更新组件状态。这是 React 文档的建议：

这也是一个做网络请求的好地方，只要你比较当前的 props 和之前的 props

但是，如果我使用更新触发网络请求，而该更新恰好获得比先前更新触发的响应更快的响应，则状态将使用新请求更新，然后被旧请求覆盖。这不是我想要的：我希望使用最新更新触发的请求中的数据更新状态。

触发新更新时，如何在 componentDidUpdate 中等待或取消数据更新？

重现问题

为了更清楚，我写了一个小例子来模拟这种情况，你可以在代码沙箱上试一试。有两个按钮，一个立即改变状态，另一个在 2 秒后改变状态。

尝试以下行为

1. 单击Fetch B（没有任何反应）

2. 快速点击Fetch A（出现来自A的数据）

3. 等待

4. （来自 B 的数据出现）

然而Data from A，用户希望留下来，因为它是最后点击的按钮。

上传到 CodeSandbox 的示例代码，以防链接中断

import React, { Component } from "react";

import ReactDOM from "react-dom";

class Display extends Component {

  constructor(props) {

    super(props);

    this.state = {

      show: ""

    };

  }

  componentDidUpdate(prevProps) {

    if (this.props.show !== prevProps.show) {

      const timeout = this.props.show === "A" ? 0 : 2000;

      const show = this.props.show === "A" ? "Data from A" : "Data from B";

      setTimeout(() => {

        this.setState({ show });

      }, timeout);

    }

  }

  render() {

    return <div>{this.state.show}</div>;

  }

}

class ChangeInput extends Component {

  constructor(props) {

    super(props);

    this.state = {

      selected: ""

    };

  }

  handleEventA = () => {

    this.setState({ selected: "A" });

  };

  handleEventB = () => {

    this.setState({ selected: "B" });

  };

  render() {

    return (

      <div>

        <button type="button" onClick={this.handleEventA}>

          Fetch A (fast)

        </button>

        <button type="button" onClick={this.handleEventB}>

          Fetch B (slow)

        </button>

        <Display show={this.state.selected} />

      </div>

    );

  }

}

export default ChangeInput;

const rootElement = document.getElementById("root");

ReactDOM.render(<ChangeInput />, rootElement);

一张图来说明问题

我创建了一个图表，显示了我怀疑正在发生的事情