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

Question

我的问题componentDidUpdate如果 props 发生变化，我正在使用它来获取数据并更新组件状态。这是 React 文档的建议：这也是一个做网络请求的好地方，只要你比较当前的 props 和之前的 props但是，如果我使用更新触发网络请求，而该更新恰好获得比先前更新触发的响应更快的响应，则状态将使用新请求更新，然后被旧请求覆盖。这不是我想要的：我希望使用最新更新触发的请求中的数据更新状态。触发新更新时，如何在 componentDidUpdate 中等待或取消数据更新？重现问题为了更清楚，我写了一个小例子来模拟这种情况，你可以在代码沙箱上试一试。有两个按钮，一个立即改变状态，另一个在 2 秒后改变状态。尝试以下行为单击Fetch B（没有任何反应）快速点击Fetch A（出现来自A的数据）等待（来自 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);一张图来说明问题我创建了一个图表，显示了我怀疑正在发生的事情