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

Question

Je souhaite mettre à jour les données de useLoaderData() après avoir soumis le formulaire. Dans mon cas :

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();
};
<Élément d'index d'itinéraire={} loader={countriesLoader} />
Dans l'élément CountriesList : 
const country= useLoaderData();
Je souhaite mettre à jour les pays avec de nouvelles données dans useLoaderData() : 
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 ;
  };
Ainsi, lorsque je soumets, je souhaite que les données de countryLoader deviennent les données de findCountry. 
Y a-t-il une solution ? Merci
            

Answer 1

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>

      ...
    </>
  );
};