react,同一接口发多次请求只返回最后一次请求数据

323 阅读1分钟

为了修复这个问题,你需要添加一个 清理函数 来忽略较早的返回结果:

function SearchResults({ query }) {  
    const [results, setResults] = useState([]);  
    const [page, setPage] = useState(1);  
    useEffect(() => {  
    let ignore = false;  
    fetchResults(query, page).then(json => {  
    if (!ignore) {  
    setResults(json);  
    }  
    });  
    return () => {  
    ignore = true;  
    };  
    }, [query, page]);  
function handleNextPageClick() {  
    setPage(page + 1);  
    }  
// ...  
    }

这确保了当你在 Effect 中获取数据时,除了最后一次请求的所有返回结果都将被忽略。