反応ルーターを使用して fetch と useLoaderData() を更新する方法

Question

フォーム送信後にuseLoaderData()のデータを更新したいのですが。 私の場合:

export const countryLoader = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all/");
  if (!res.ok) {
    throw Error("データにアクセスできません!");
  }
  res.json() を返します。
};

<ルートインデックス要素={} ローダー={countriesLoader} />

CountriesList 要素内:

const country= useLoaderData();

useLoaderData() の新しいデータで国を更新したい:

const find Country = async () => {
    const res = await fetch(
      `https://restcountries.com/v3.1/name/${searchText}`
    );
    const データ = res.json();

    データを返す。
  };

なので、submitするときはcountrysLoaderのデータがfind Countryのデータになるようにしたいのです。

解決策はありますか?ありがとうございます

Answer 1

フォームを送信するときにルーティング アクションとして findcountry を使用するとよいと思います。ローダーは、ルートが初めてロードされるときに実行されます。アクションは後でスケジュールできます。

基本的な例:

リーリー リーリー リーリー リーリー