使用react-router更新fetch和useLoaderData()的方法
P粉883223328
2023-08-26 12:39:34
<p>我想在提交表单后更新useLoaderData()的数据。
在我的情况下：</p>
<pre class="brush:php;toolbar:false;">export const countriesLoader = async () => {
const res = await fetch("https://restcountries.com/v3.1/all/");
if (!res.ok) {
throw Error("无法访问数据！");
}
return res.json();
};</pre>
<p><code><路由索引元素={<CoutriesList />} loader={countriesLoader} /></code></p>
<p>在CountriesList元素中：</p>
<p><code>const国家= useLoaderData();</code></p>
<p>我想要更新countries useLoaderData()中的新数据：</p>
<pre class="brush:php;toolbar:false;">const findCountry = async () => {
const res = await fetch(
`https://restcountries.com/v3.1/name/${searchText}`
);
const data = res.json();
return data;
};</pre>
<p>所以当我提交时，我希望countriesLoader的数据变成findCountry的数据。</p>
<p>有什么解决方案吗？谢谢</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我认为你可能想在提交表单时使用
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> ... </> ); };