使用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>
我認為你可能想在提交表單時使用
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> ... </> ); };