javascript - 如何在 AJAX 调用中查询应用程序状态？

Question

我正在尝试制作一个自动完成的 React 组件。目前我正在使用 Github 的用户搜索 API 来查询与给定查询字符串匹配的用户。自动完成大部分时间都可以正常工作。但是，因为我同时进行多个 AJAX 调用，有时查询 1 的响应处理程序在查询 2 的响应处理程序之后被触发。例如:

1. 用户输入查询字符串“alex”
2. JS 为字符串“a”、“al”、“ale”和“alex”触发 4 个异步 AJAX 查询。
3. 查询“a”返回的响应处理程序。
4. 查询“al”返回的响应处理程序。
5. 查询“alex”返回的响应处理程序。
6. 查询“ale”返回的响应处理程序。
7. 用户看到查询“ale”的结果，而不是预期的“alex”。

这里有一些代码可以证明这一点:https://codepen.io/alexspurling/pen/gOOWNpa?editors=0010

(请注意，如果您运行此代码，则有每分钟 10 个请求的速率限制。如果它停止工作，请稍等片刻，然后重试)

正如您从控制台输出中看到的那样，返回的结果顺序错误，此处显示的结果是查询“a”而不是“alex”。

我尝试的解决方案是在我的应用程序状态下跟踪最近提交的查询(请参阅 lastQuery 变量)。然而，这失败了，因为当 receivedResults 函数被调用时，我只能访问旧的“关闭”值，而不是这部分应用程序状态的实际当前值。

我的问题是，是否可以从异步响应处理程序中读取实际的当前状态？如果不是，这是因为它会破坏单向数据流吗？您将如何以维持单向数据流的方式实现所需的行为？

注意:我不想使用去抖动或延迟。我也不想中止飞行请求。我的问题更普遍地是关于 React 应用程序中的数据流。自动完成示例只是演示问题的好方法。

Answer 1

解决该问题的一种可能方法是使用 React refs，这是修改后的代码笔:https://codepen.io/rikin/pen/RwwVXeM?editors=0011

我修改了你的 Auto 组件，如下所示:

function Auto(props) {
  const inputref = React.useRef(null); // <-------------------------
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const queryNum = props.lastQuery + 1;
    search(value, queryNum, inputref); // <-------------------------
    props.setLastQuery(queryNum);   }, [value, inputref]);

  async function search(value, queryNum, inputref) {
    const url = 'https://api.github.com/search/users?q=' + value;
    const resp = await fetch(url)
    const json = await resp.json()
    if (json.items) {
      const users = json.items.map((item) => {
        return item.login;
      });
      inputref.current.value === value // <-----------------------
        && props.setResults({query: value, queryNum: queryNum, users: users});
    }   }

  return (
    <input value={value} ref={inputref} onChange={(e) => {setValue(e.target.value)}}></input>
                         ^^^^^^^^^^^^^^   
  ) }

通过这样做，您不会取消飞行中的请求，也不会使用去抖动或延迟。相反，一旦响应返回，您将检查输入的当前 value，如果它与 API 请求期间传递给它的 value 匹配，那么它将执行 set 否则它将丢弃的操作。

可能还有其他方法(甚至更高效或更正确的方法)，这是我尝试用一​​种可能的方法来解决这个问题。