首页  >  问答  >  正文

使用react-router更新fetch和useLoaderData()的方法

<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>
P粉883223328P粉883223328442 天前456

全部回复(1)我来回复

  • P粉373990857

    P粉3739908572023-08-27 11:27:14

    我认为你可能想在提交表单时使用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>
    
          ...
        </>
      );
    };

    回复
    0
  • 取消回复