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

Question

我想在提交表單後更新useLoaderData()的資料。 在我的情況下：

export const countriesLoader = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all/");
  if (!res.ok) {
    throw Error("無法存取資料！");
  }
  return res.json();
};

<路由索引元素={} loader={countriesLoader} />

在CountriesList元素：

const國= useLoaderData();

我想要更新countries useLoaderData()中的新資料：

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

    return data;
  };

所以當我提交時，我希望countriesLoader的資料變成findCountry的資料。

有什麼解決方案嗎？謝謝

Answer 1

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

      ...
    </>
  );
};