我有一个调用 API 的简单应用程序。我正在使用 react-query 进行提取并缓存数据。但是如果你去网络改成慢3g,在它的状态改变后,它会调用API。文档声明react-query在第二次尝试中将返回缓存的数据。
import React, { memo, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useQuery } from "react-query";
import Axios from "axios";
const fetchTodoList = async (key, id) => {
const { data } = await Axios.get(
`https://jsonplaceholder.typicode.com/photos`
);
return data;
};
function App() {
const [flag, setFlag] = useState(true);
const { isLoading, isError, data, error, isFetching } = useQuery(
"todos",
fetchTodoList
);
console.log(isFetching, data);
if (isLoading) {
return <span>Loading...</span>;
}
if (isError) {
return <span>Error: {error.message}</span>;
}
// also status === 'success', but "else" logic works, too
return (
<>
<button
onClick={() => {
setFlag(!flag);
}}
>
ddddddddd
</button>
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</>
);
}
export default memo(App);