Cara mengemas kini fetch dan useLoaderData() menggunakan react-router

Question

Saya ingin mengemas kini data useLoaderData() selepas menyerahkan borang. Dalam kes saya:

eksport const countriesLoader = async () =>
  const res = tunggu ambil("https://restcountries.com/v3.1/all/");
  jika (!res.ok) {
    throw Error("Tidak dapat mengakses data!");
  }
  return res.json();
};

} loader={countriesLoader} />

Dalam elemen CountriesList:

const country= useLoaderData();

Saya mahu mengemas kini negara dengan data baharu dalam useLoaderData():

const findCountry = async () =>
    const res = tunggu ambil(
      `https://restcountries.com/v3.1/name/${searchText}`
    );
    data const = res.json();

    mengembalikan data;
  };

Jadi apabila saya menyerahkan, saya mahu data negaraLoader menjadi data findCountry.

Adakah terdapat sebarang penyelesaian? Terima kasih

Answer 1

Saya rasa anda mungkin mahu menggunakan findCountry sebagai tindakan penghalaan semasa menyerahkan borang. Pemuat dijalankan pada kali pertama laluan dimuatkan. Satu tindakan boleh dijadualkan kemudian.

Contoh asas:

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>

      ...
    </>
  );
};