Javascript 反应实时搜索功能工作，但不取消网络选项卡中的上一个请求

我正在学习关于“alligator.io”的教程。 链接是：

代码：： App.js

问题：： 问题是，尽管一切正常，但在发出新请求之前，在utils.js文件中编写的用于取消所有以前请求的代码没有正常工作，我在搜索框中键入的每个按键或字母表都会收到一个网络请求

我的意图是，如果我输入“蜘蛛侠”，那么我应该只搜索蜘蛛侠，而不是搜索“s”或“p”或“I”或“d”或“e”或“r”或“m”或“a”，并且应该立即取消这些请求，以避免网络负担。

---

任何洞察都会有帮助。

我复制了完全相同的代码，并在代码沙箱中运行。它正在工作。
代码沙盒：
正如你所看到的，当我键入

spiderman

时，所有其他请求都被取消，只有

spiderman

一词成功命中。

---

. 如果您遇到任何问题，请单击Lmk。

我复制了完全相同的代码并在代码沙箱中运行。它正在工作。
代码沙盒：
正如你所看到的，当我键入

spiderman

时，所有其他请求都被取消，只有

spiderman

一词成功命中。 . 如果你面临任何问题，请联系我

import React, { Component } from 'react';
import { avoidUnnecessarySearch } from './utils';
import './App.css';

class App extends Component {
  state = {
    movies: null,
    loading: false,
    value: ''
  };

  search = async val => {
    this.setState({ loading: true });
    const res = await avoidUnnecessarySearch(
      `https://api.themoviedb.org/3/search/movie?query=${val}&api_key=aac2c5b048fc2fae15675475f98c6ef7`
    );
    const movies = await res ? res.results:'';
    console.log(movies);

    // this.setState({ movies, loading: false });
  };

  onChangeHandler = async e => {
    this.search(e.target.value);
    this.setState({ value: e.target.value });
  };


  render() {
    return (
      <div>
          <input
            value={this.state.value}
            onChange={e => this.onChangeHandler(e)}
            placeholder="Type something to search"
            />

      </div>
    )
  }
}
export default App;

import axios from 'axios';

const makeRequestCreator = () => {
  let token;
  return async (query) => {
   // Check if we made a request
   if(token){
     // Cancel the previous request before making a new request
     token.cancel()
   }
   // Create a new CancelToken
   token = axios.CancelToken.source()
   try{
     const res = await axios(query, {cancelToken: token.token})
     const result = res.data
     return result;
   } catch(error) {
       if(axios.isCancel(error)) {
         // Handle if request was cancelled
         console.log('Request canceled', error.message);
       } else {
         // Handle usual errors
         console.log('Something went wrong: ', error.message)
       }
   }
 }
}

export const avoidUnnecessarySearch = makeRequestCreator();