使用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>

      ...
    </>
  );
};