在响应中使用 setState 函数时，React js 获取请求中止不起作用

Question

没有 setState 中止请求工作正常但是 在 fetch then 函数上使用 setState 时无法中止异步请求。下面我提到了我正在玩的代码。

let controller;
let signal;

const [stateRefresh, setStateRefresh] = useState(true);
const [cancelReq, setCancelReq] = useState(false);


const startFetch = async() => {
    controller = new AbortController();
    signal = controller.signal;

    for (var i = 20 - 1; i >= 0; i--) {
        let url = 'https://jsonplaceholder.typicode.com/todos/1';
        fetch(url, { signal })
          .then((response) => {
            setStateRefresh(!stateRefresh);
            console.log("Download complete", response);
          })
          .catch((err) => {
            console.error(`Download error: ${err.message}`);
        });
    }
} 

const stopFetch = async() => {
     controller && controller.abort();
}


return(
    <div>
    <button onClick={ startFetch }>start</button>
    <button onClick={ stopFetch }>stop</button>     
    </div>
);