我收到此错误：未捕获错误：未设置 QueryClient，请使用 QueryClientProvider 在 useQueryClient 处设置一个我正在处理聊天机器人界面。我正在渲染组件仪表板.jsx 和...
我收到此错误：
未捕获错误：未设置 QueryClient，请使用 QueryClientProvider 在 useQueryClient 处设置一个
我正在开发一个聊天机器人界面。我正在渲染组件 dashboard.jsx ，它正在从中进行数据提取 apiHandler.js 。
这是 dashboard.jsx ：
import { useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { submitQuery } from "@/pages/api/apiHandler.js";
import { Alert } from "@mui/material";
export function Dashboard() {
const [query, setQuery] = useState("");
const [temperature, setTemperature] = useState("0.4");
const [limite, setLimite] = useState("3");
const [conversation, setConversation] = useState([]);
const mutation = useMutation({
mutationFn: (queryData) =>
submitQuery(queryData.query, queryData.temperature, queryData.limite),
onError: (error) => {
console.error("Error submitting query:", error);
setAlert(error.message || "Failed to submit query");
setTimeout(() => setAlert(null), 3000);
},
onSuccess: (data) => {
if (data.error) {
setAlert(data.error);
setTimeout(() => setAlert(null), 3000);
return;
}
setConversation((prevConversation) => [
...prevConversation,
{ type: "user", text: query },
{
type: "bot",
messages: data.map((item) => ({
pdfname: item.pdfname,
article: item.Article,
content: item.content,
})),
},
]);
setQuery("");
},
});
const handleSubmit = (e) => {
e.preventDefault();
if (temperature < 0 || temperature > 1) {
setAlert("La température doit être entre 0 et 1");
setTimeout(() => setAlert(null), 3000);
return;
}
mutation.mutate({
query: query,
temperature: temperature,
limite: limite,
});
};
return (.............);
这是 apiHandler.js ：
export async function submitQuery(queryText, temperature, limit) {
return fetch('/api/search', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Encoding': 'UTF-8'
},
body: JSON.stringify({
query: queryText,
threshold: temperature,
limit: limit,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch((error) => {
console.error('Error submitting query:', error);
return { error: error.message || 'Failed to submit query' };
});
}
这是 index.astro ：
---
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import '../styles/globals.css';
import { Dashboard } from '@/components/ui/dashbord';
const queryClient = new QueryClient();
---
<html>
<head>
<title>CoteJuriste</title>
</head>
<body>
<QueryClientProvider client={queryClient}>
<Dashboard client:only="react" />
</QueryClientProvider>
</body>
</html>
我原本希望在浏览器上获取仪表板组件，但我得到的是一个空白页，并且出现了上述错误