在React中使用AbortController后Axios仍然返回数据

Question

所有，我试图了解我的代码中涉及取消 axios post 请求的问题。我有一个表单，用户可以通过该表单提出开放式电影搜索请求。当搜索正在进行时，我向用户提供一个取消按钮来中止搜索并输入新的搜索词。当我测试时，如果我中止请求，我仍然会收到数据，并且仍然会处理数据，就像请求没有被取消一样。

这发生在我专门用于处理 openai 请求的 React 组件中。根据我的 package.json，我使用的是 Axios 9.5.0。我在组件内做的第一件事是设置一个状态，然后：

  const controller = new AbortController();

这是用户提交搜索时的处理程序：

const handleSubmit = async () => {
    (set some states to set up correct user interface)

    try {
      const searchResults = await axios.post(
        "/api/movies/ai-search",
        {
          userRequest: request,
        },
        { signal: controller.signal }
      );
      const jsonResults = JSON.parse(searchResults.data);
      
      (do stuff with the returned data)
      
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log("Request cancelled");
      } else {
        console.log(err);
      }
      
      (set some more states to reflect error message)

      );
    }
  };

这是用户单击取消当前搜索时的处理程序：

  const handleSearchCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
    // handler for when user cancels search
    console.log("Cancelling the search") // confirm I made it to the handler
    controller.abort();
    
    (set a couple of states to update the UI)
  };

我认为可能存在的一个问题是所有状态设置：其中大多数都是从父组件中钻取的。这可能是导致问题的原因吗？无论如何，如果我提交搜索然后取消它，我确实会得到控制台日志，表明我处于正确的处理程序中。但如果我再等一会儿，搜索结果就会出现并被处理，就好像请求没有被取消一样。

编辑：

根据 Dat 的建议，我已切换到

useRef

设置：

  const abortControllerRef = useRef<AbortController>(new AbortController());

这对于第一次搜索有效...但所有后续搜索都会立即取消，无需用户输入。在研究这个问题时，我似乎需要为每个请求实例化一个新的 AbortController。但由于我使用的是 useRef，所以我无法在点击处理程序中执行此操作。将尝试在自定义挂钩中执行此操作。

Answer 1

你能再检查一下你的axios版本吗？ Axios 9.5.0 不存在。