我想在提交表单后更新useLoaderData()的数据。 在我的情况下：
1
1075export const countriesLoader = async () => {
const res = await fetch("https://restcountries.com/v3.1/all/");
if (!res.ok) {
throw Error("无法访问数据！");
}
return res.json();
};
<路由索引元素={
在CountriesList元素中：
const国家= useLoaderData();
我想要更新countries useLoaderData()中的新数据：
const findCountry = async () => {
const res = await fetch(
`https://restcountries.com/v3.1/name/${searchText}`
);
const data = res.json();
return data;
};
所以当我提交时，我希望countriesLoader的数据变成findCountry的数据。
有什么解决方案吗？谢谢
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我认为你可能想在提交表单时使用
findCountry作为路由动作。加载器在第一次加载路由时运行。稍后可以调度一个动作。基本示例：
const router = createBrowserRouter([ { index: true, element: <CountriesList />, loader: countriesLoader, action: findCountry } ]); <RouterProvider router={router} />const countriesLoader = async () => { const res = await fetch("https://restcountries.com/v3.1/all/"); if (!res.ok) { throw Error("无法获取数据！"); } return res.json(); };const findCountry = async ({ request }) => { const formData = await request.formData(); const res = await fetch( `https://restcountries.com/v3.1/name/${formData.get("country")}` ); if (!res.ok) { throw Error("无法获取数据！"); } return res.json(); };import { Form, useActionData, useLoaderData } from "react-router-dom"; const CountriesList = () => { const searchResult = useActionData(); const countriesData = useLoaderData(); return ( <> ... <Form method="post" replace> <label> 搜索 <input required type="text" name="country" /> </label> <button type="submit">创建</button> </Form> ... </> ); };