Maison  >  Questions et réponses  >  le corps du texte

Comment mettre à jour fetch et useLoaderData() à l'aide de React-Router

<p>Je souhaite mettre à jour les données de useLoaderData() après avoir soumis le formulaire. Dans mon cas : </p> <pre class="brush:php;toolbar:false;">export const countryLoader = async () => const res = wait fetch("https://restcountries.com/v3.1/all/"); si (!res.ok) { throw Error ("Impossible d'accéder aux données!"); } return res.json(); };</pré> <p><code><Élément d'index d'itinéraire={<CoutriesList />} loader={countriesLoader} /></code></p> <p>Dans l'élément CountriesList : </p> <p><code>const country= useLoaderData();</code></p> <p>Je souhaite mettre à jour les pays avec de nouvelles données dans useLoaderData() : </p> <pre class="brush:php;toolbar:false;">const findCountry = async () => const res = attendre la récupération ( `https://restcountries.com/v3.1/name/${searchText}` ); const data = res.json(); renvoyer des données ; };</pré> <p>Ainsi, lorsque je soumets, je souhaite que les données de countryLoader deviennent les données de findCountry. </p> <p>Y a-t-il une solution ? Merci</p>
P粉883223328P粉883223328442 Il y a quelques jours451

répondre à tous(1)je répondrai

  • P粉373990857

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

    Je pense que vous voudrez peut-être utiliser findCountry comme action de routage lors de la soumission du formulaire. Le chargeur est exécuté la première fois qu'un itinéraire est chargé. Une action peut être programmée ultérieurement.

    Exemple de base :

    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>
    
          ...
        </>
      );
    };

    répondre
    0
  • Annulerrépondre