반응 라우터를 사용하여 fetch 및 useLoaderData()를 업데이트하는 방법

Question

양식을 제출한 후 useLoaderData()의 데이터를 업데이트하고 싶습니다. 제 경우에는

export const countryLoader = async () =>
  const res = 가져오기를 기다립니다("https://restcountries.com/v3.1/all/");
  if (!res.ok) {
    throw Error("데이터에 접근할 수 없습니다!");
  }
  res.json()을 반환합니다.
};

<경로 색인 요소={} loader={countriesLoader} />

CountriesList 요소에서:

const country= useLoaderData();

useLoaderData()의 새 데이터로 국가를 업데이트하고 싶습니다.

const findCountry = async () =>
    const res = 가져오기를 기다립니다(
      `https://restcountries.com/v3.1/name/${searchText}`
    );
    const 데이터 = res.json();

    데이터를 반환합니다.
  };

그래서 제출할 때 countryLoader의 데이터가 findCountry의 데이터가 되기를 원합니다.

해결책이 있나요? 감사합니다

Answer 1

양식을 제출할 때 findCountry를 라우팅 작업으로 사용하는 것이 좋을 것 같습니다. 로더는 경로가 처음 로드될 때 실행됩니다. 나중에 작업을 예약할 수 있습니다.

기본 예:

으아악 으아악 으아악 으아악