使用 React/Typescript 的 React 查询中的数据设置状态
SetState with data from React-query with React/Typescript
我正在尝试使用 setState 设置状态,它需要默认为来自 React-query 的数据,但在刷新时显示 undefined
。
const fetchAlerts = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/todos');
return res.json();
};
const { data, status } = useQuery('todos', fetchTodos, {
staleTime: 5000,
});
const result = data;
const [fetchData, setFetchData] = React.useState<ITodo[]>(result);
然后我像这样映射状态对象:
{fetchData.map() etc}
像这样的东西应该有用。有关工作示例,请参见此处的 codesandbox。
function Example() {
const [fetchedData, setFetchedData] = React.useState([]);
const fetchTodos = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/todos");
return res.json();
};
const { data: result } = useQuery("todos", fetchTodos, {
staleTime: 5000
});
React.useEffect(() => {
setFetchedData(result);
}, [result]);
return <p>{JSON.stringify(fetchedData)}</p>;
}
我已经在沙箱中设置了一个工作示例,您需要在 useEffect
中设置状态数据并用 QueryClientProvider
包装您的应用程序才能成功使用 userQuery
“只是提到那个
// 警报组件
import React, { useEffect } from "react";
import { useQuery } from "react-query";
import "./styles.css";
interface ITodo {
userId: string;
id: string;
title: string;
}
const fetchAlerts = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/todos");
return res.json();
};
export default function Component() {
const [fetchData, setFetchData] = React.useState<ITodo[]>([]);
const { data, status } = useQuery<ITodo[]>("mytodos", fetchAlerts, {
staleTime: 5000
});
useEffect(() => {
setFetchData(data ?? []);
}, [data]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{fetchData.map((x) => (
<li>
{" "}
{x.userId} - {x.id} - {x.title.substr(10)}
</li>
))}
</div>
);
}
// 应用组件
import "./styles.css";
import Component from "./component";
import { QueryClient, QueryClientProvider } from "react-query";
export default function App() {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<Component />
</div>
</QueryClientProvider>
);
}
我正在尝试使用 setState 设置状态,它需要默认为来自 React-query 的数据,但在刷新时显示 undefined
。
const fetchAlerts = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/todos');
return res.json();
};
const { data, status } = useQuery('todos', fetchTodos, {
staleTime: 5000,
});
const result = data;
const [fetchData, setFetchData] = React.useState<ITodo[]>(result);
然后我像这样映射状态对象:
{fetchData.map() etc}
像这样的东西应该有用。有关工作示例,请参见此处的 codesandbox。
function Example() {
const [fetchedData, setFetchedData] = React.useState([]);
const fetchTodos = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/todos");
return res.json();
};
const { data: result } = useQuery("todos", fetchTodos, {
staleTime: 5000
});
React.useEffect(() => {
setFetchedData(result);
}, [result]);
return <p>{JSON.stringify(fetchedData)}</p>;
}
我已经在沙箱中设置了一个工作示例,您需要在 useEffect
中设置状态数据并用 QueryClientProvider
包装您的应用程序才能成功使用 userQuery
“只是提到那个
// 警报组件
import React, { useEffect } from "react";
import { useQuery } from "react-query";
import "./styles.css";
interface ITodo {
userId: string;
id: string;
title: string;
}
const fetchAlerts = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/todos");
return res.json();
};
export default function Component() {
const [fetchData, setFetchData] = React.useState<ITodo[]>([]);
const { data, status } = useQuery<ITodo[]>("mytodos", fetchAlerts, {
staleTime: 5000
});
useEffect(() => {
setFetchData(data ?? []);
}, [data]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{fetchData.map((x) => (
<li>
{" "}
{x.userId} - {x.id} - {x.title.substr(10)}
</li>
))}
</div>
);
}
// 应用组件
import "./styles.css";
import Component from "./component";
import { QueryClient, QueryClientProvider } from "react-query";
export default function App() {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<Component />
</div>
</QueryClientProvider>
);
}