如何在React组件中正确处理依赖输入的异步数据请求？

问题场景 #

在React+TypeScript开发中，常遇到这类场景：组件根据用户输入（如邮政编码）调用API获取对应数据（如城市名称）并实时展示。基础实现代码如下：

import * as React from 'react';

export interface IXmplState {
  plc: string;
  name: string;
}

export default class Xmpl extends React.Component<{}, IXmplState> {

  constructor(props){
    super(props);
    this.state = {name: "", plc: ""};
  }

  private fetchName(plc: string): Promise<string> {
    // 从服务器获取数据的逻辑
  }

  private updateName(plc: string): void {
    this.fetchName(plc).then(newName => this.setState({name: newName}));
  }

  public render(): React.ReactElement<{}> {
    return(
      <div>
        <input value={this.state.plc} onChange={(event) => this.updateName(event.target.value)}/>
        <div>{this.state.name}</div>
      </div>
    );
  }

}

这里存在竞态问题：用户快速输入时，先发出的请求A仍处于pending状态，新的请求B已发出；若B先返回并更新state，之后A再返回会覆盖state，导致展示错误数据。

现有临时解决方案是通过校验值判断是否更新state：

export default class Xmpl extends React.Component<{}, IXmplState> {
  private nameCkSm: number = 0;
  // ...
  private updateName(plc: string): void {
    const ckSm = ++this.nameCkSm;
    this.fetchName(plc).then(newName => this.setState(() => {
      if(this.nameCkSm === ckSm) return {name: newName};
      return {}; // 不更新state
    }));
  }
}

可行解决方案 #

1. 取消旧请求（AbortController） #

使用浏览器原生AbortController，在新请求发起时取消上一个未完成的请求，从根源避免竞态。示例代码：

export default class Xmpl extends React.Component<{}, IXmplState> {
  private abortController?: AbortController;

  constructor(props){
    super(props);
    this.state = {name: "", plc: ""};
  }

  private fetchName(plc: string, signal: AbortSignal): Promise<string> {
    return fetch(`/api/get-name?plc=${plc}`, { signal })
      .then(res => res.text());
  }

  private updateName(plc: string): void {
    // 取消上一个请求
    this.abortController?.abort();
    this.abortController = new AbortController();

    this.fetchName(plc, this.abortController.signal)
      .then(newName => this.setState({name: newName}))
      .catch(err => {
        // 忽略取消请求的错误
        if(err.name !== 'AbortError') throw err;
      });
  }

  // render部分不变
}

2. React Hooks函数组件方案 #

如果使用函数组件，可通过useRef保存最新输入值，请求返回时校验是否匹配当前输入：

import { useState, useRef } from 'react';

export default function Xmpl() {
  const [plc, setPlc] = useState("");
  const [name, setName] = useState("");
  const latestPlc = useRef(plc);

  const fetchName = async (inputPlc: string): Promise<string> => {
    // API请求逻辑
  };

  const updateName = async (inputPlc: string) => {
    latestPlc.current = inputPlc;
    const newName = await fetchName(inputPlc);
    // 仅当当前输入值与请求时一致才更新
    if(latestPlc.current === inputPlc) {
      setName(newName);
    }
  };

  return (
    <div>
      <input value={plc} onChange={(e) => {
        setPlc(e.target.value);
        updateName(e.target.value);
      }}/>
      <div>{name}</div>
    </div>
  );
}

3. 防抖（Debounce） #

通过防抖减少不必要的请求次数，用户停止输入一段时间后再发起请求，降低竞态发生概率。示例使用lodash.debounce：

import debounce from 'lodash.debounce';

export default class Xmpl extends React.Component<{}, IXmplState> {
  // 其他代码不变

  private updateName = debounce((plc: string) => {
    this.fetchName(plc).then(newName => this.setState({name: newName}));
  }, 300); // 300ms防抖延迟

  public componentWillUnmount() {
    this.updateName.cancel(); // 组件卸载时取消未执行的防抖函数
  }

  // render部分不变
}

注意：防抖仅减少请求，极端情况仍可能出现竞态，建议结合其他方案使用。

4. 状态管理库异步处理 #

使用Redux Toolkit的createAsyncThunk或Redux Saga的takeLatest，这类工具内置了竞态处理逻辑：
以Redux Toolkit为例：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// 定义异步action
const fetchName = createAsyncThunk(
  'name/fetch',
  async (plc: string) => {
    const response = await fetch(`/api/get-name?plc=${plc}`);
    return response.text();
  }
);

const nameSlice = createSlice({
  name: 'name',
  initialState: { value: '', plc: '' },
  reducers: {
    setPlc: (state, action) => {
      state.plc = action.payload;
    }
  },
  extraReducers: (builder) => {
    builder.addCase(fetchName.fulfilled, (state, action) => {
      // 仅当当前plc与请求时参数一致才更新
      if(state.plc === action.meta.arg) {
        state.value = action.payload;
      }
    });
  }
});

// 组件中使用
import { useDispatch, useSelector } from 'react-redux';

export default function Xmpl() {
  const dispatch = useDispatch();
  const { value: name, plc } = useSelector((state: any) => state.name);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newPlc = e.target.value;
    dispatch(nameSlice.actions.setPlc(newPlc));
    dispatch(fetchName(newPlc));
  };

  return (
    <div>
      <input value={plc} onChange={handleChange}/>
      <div>{name}</div>
    </div>
  );
}

是否要避免这类输入处理？ #

不需要避免，这类实时根据输入获取数据的场景（如搜索联想、地址自动补全）非常常见，核心是用正确方法处理竞态问题。

通用最优处理方式 #

优先推荐AbortController取消旧请求，它从根源终止旧请求，既避免竞态又不浪费服务器资源。函数组件场景下，结合useRef校验当前输入值是轻量有效的方案。防抖可作为辅助手段，减少请求次数、提升性能与体验。

内容的提问来源于stack exchange，提问作者Mindxxxd