Как обновить выборку с помощью useLoaderData() с помощью реактивного маршрутизатора?

Я хотел бы обновить данные 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.

любое решение? Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
88
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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("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>

      ...
    </>
  );
};

вау это решение! но это не работает в моем проекте? Любая идея, почему? codeandbox.io/s/naughty-sammet-3vjood?file=/src/components/‌​…

mdnc 02.02.2023 00:58

я хочу заменить весь список стран на страну, которую мы ищем

mdnc 02.02.2023 01:02

@mdnc Если бы мне пришлось угадывать, возможно, компоненту необходимо условно отображать тот или иной набор результатов. Заглянем в песочницу.

Drew Reese 02.02.2023 01:05

@mdnc Хорошее приложение. Оказывается, это была пара проблем: (1) на onSubmit есть обработчик Form, который предотвращает действие по умолчанию, и (2) action = "/" была проблема, поскольку CountriesList отображается как индексный маршрут в MainLayout. Оказывается, action действительно нужен только в том случае, если форму нужно отправить по другому пути в приложении. Вот вилка вашей песочницы, которая выглядит так, как вы ожидаете.

Drew Reese 02.02.2023 01:23

Большое спасибо, теперь я понимаю проблемы! но я чувствую себя ограниченным с вашим запросом, потому что теперь я хочу добавить фильтр по региону, который предоставляется API: restcountries.com/v3.1/region/${regionl}; Но я не могу использовать второе действие в <Route>, верно? Я не знаю, как подойти к этому, есть идеи?

mdnc 02.02.2023 12:37

@mdnc Вероятно, вы можете отправлять разные формы и обрабатывать фактор ветвления в функции действия на основе того, что передается в реквизите request. Вы пытаетесь подключить выпадающий список регионов?

Drew Reese 02.02.2023 19:34

@mdnc Проверьте эту реализацию: codeandbox.io/s/…

Drew Reese 02.02.2023 19:49

Другие вопросы по теме

Работа с массивом TypeScript в React Redux
Добавление перегрузки к функции setState, когда она передается дочернему элементу
Настройка домашней страницы для приложения React-Admin на основе разрешений
Как получить пользователей из базы данных, используя переменную, отличную от идентификатора пользователя
Содержимое компонента React не отображается или не найдено
Делаем ли мы с flushSync() внутри useEffect то же самое, что и с useLayoutEffect?
Если внимательно присмотреться, между коробками будних дней есть небольшие линии или промежутки. Эти линии или пробелы присутствуют в Chrome, но не в Firefox
Запретить вставку VS Code IntelliSense = {} после имени функции
При распространении prevstate хука React useState я получаю сообщение об ошибке: должен иметь метод «[Symbol.iterator]()», который возвращает iterator.ts
У меня есть определенное количество кнопок, нажатие на одну из которых должно отображать содержимое только для нее в компоненте React