Я хотел бы обновить данные useLoaderData() после отправки формы. В моем случае :
export const countriesLoader = async () => {
const res = await fetch("https://restcountries.com/v3.1/all/");
if (!res.ok) {
throw Error("Could not reach the data !");
}
return res.json();
};
<Route index element = {<CoutriesList />} loader = {countriesLoader} />
в элементе CountryList:
const countries = useLoaderData();
новые данные, которые я хотел бы обновить в странах useLoaderData() :
const findCountry = async () => {
const res = await fetch(
`https://restcountries.com/v3.1/name/${searchText}`
);
const data = res.json();
return data;
};
Поэтому, когда я отправляю, я хотел бы, чтобы данные из countryLoader стали данными из findCountry.
любое решение? Спасибо
Я думаю, вы можете использовать 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("Could not reach the data !");
}
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("Could not reach the data !");
}
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>
Search <input required type = "text" name = "country" />
</label>
<button type = "submit">Create</button>
</Form>
...
</>
);
};
я хочу заменить весь список стран на страну, которую мы ищем
@mdnc Если бы мне пришлось угадывать, возможно, компоненту необходимо условно отображать тот или иной набор результатов. Заглянем в песочницу.
@mdnc Хорошее приложение. Оказывается, это была пара проблем: (1) на onSubmit
есть обработчик Form
, который предотвращает действие по умолчанию, и (2) action = "/"
была проблема, поскольку CountriesList
отображается как индексный маршрут в MainLayout
. Оказывается, action
действительно нужен только в том случае, если форму нужно отправить по другому пути в приложении. Вот вилка вашей песочницы, которая выглядит так, как вы ожидаете.
Большое спасибо, теперь я понимаю проблемы! но я чувствую себя ограниченным с вашим запросом, потому что теперь я хочу добавить фильтр по региону, который предоставляется API: restcountries.com/v3.1/region/${regionl}; Но я не могу использовать второе действие в <Route>, верно? Я не знаю, как подойти к этому, есть идеи?
@mdnc Вероятно, вы можете отправлять разные формы и обрабатывать фактор ветвления в функции действия на основе того, что передается в реквизите request
. Вы пытаетесь подключить выпадающий список регионов?
@mdnc Проверьте эту реализацию: codeandbox.io/s/…
вау это решение! но это не работает в моем проекте? Любая идея, почему? codeandbox.io/s/naughty-sammet-3vjood?file=/src/components/…