Как Изменять конец ссылки API при переходе на разные страницы?

Question

[Владислав Хрущёв]

Делаю сайт по starwars, с одной бесплатной API, и у нее есть различные данные в зависимости от запроса. Всего у нее есть несколько категорий (films, people, starships, planets )и у меня на сайте есть такие вкладки. Вопрос, как сделать изменение API в зависимости от той вкладки в которой находишься ? Пытался разными способами, от useCallback и useState. до помещения на кнопку оператора onClick,
Вот код и не работающий метод,

const films = "films";
  const peoples = "people";
  const planets = "planets";
  const starshipsStr = "starships";

let [url, setUrl] = useState(`https://swapi.dev/api/${films}`);

let navigation = useLocation();

  useEffect(() => {
    if (navigation.pathname === "/films") {
      setUrl(`https://swapi.dev/api/${films}`);
      console.log("Вкладка фильмов", url);
    } else if (navigation.pathname === "/starships") {
      setUrl(`https://swapi.dev/api/${starshipsStr}`);
      console.log("Вкладка космических машин", url);
    } else if (navigation.pathname === "/people") {
      setUrl(`https://swapi.dev/api/${peoples}`);
      console.log("вкладка люди", url);
    } else if (navigation.pathname === "/planets") {
      setUrl(`https://swapi.dev/api/${planets}`);
      console.log("вкладка планет", url);
    } else {
      console.log("Ничего не работает");
    }
  }, []);

 useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((resp) => {
        setData(resp.results);
      });
  }, []);

return (
    <>
      <Routes>
        <Route
          element={
            <HeaderComponent
              data={ArrayBtn}
              width={120}
              height={120}
              color={"white"}
            />
          }
        >
          <Route exact path={"/"} element={<MainPage />} />
          <Route path={"/films"} element={<Films value={value} />} />
          <Route path={"/starships"} element={<StarCars value={value} />} />
          <Route path={"/planets"} element={<Planets value={value} />} />
          <Route path={"/peoples"} element={<Peoples value={value} />} />
        </Route>
      </Routes>
    </>
  );
}

P.s. метод useLocation() взял из Router-dom v6. Метод value это конечный массив с данными, по умолчанию в API нет картинок, и я их добавлял в ручную, поэтому конечный массив называется по другому

Comments

[black1277]

для этого используют роутинг - сопоставление url-ваших страниц(вкладок) - нужному контенту. Вам потребуется бибилотека react-router-dom.

[Владислав Хрущёв]

black1277, она у меня уже установлена, роутинг также настроен и корректно работает, осталось придумать способ как изменять API в зависимости от вкладки, Для мониторинга вкладки я использую useLocation(), который опять же из React-router-dom

[black1277]

Владислав Хрущёв, ну вот, а каждый элемент внутри себя должен знать какую строку API ему использовать для получения данных.

[Владислав Хрущёв]

Я@black1277, я не до конца понимаю что вы имеете ввиду. Я конечно могу использовать 4 условно разных API и принимать из них данные, но у меня будет тогда в 4 раза больше кода, и это будет не совсем читабельно, хотелось бы просто менять окончание ссылки API на ту которую мне нужно

[black1277]

Владислав Хрущёв, не совсем так. Сделайте функцию или класс, которая будет использовать различные API ссылки для различных запросов и дергайте оттуда нужные методы из разных компонентов. Я когда-то начинал писать нечто подобное по туториалу. Можете глянуть пример реализации на классах - swapi-service

Answer 1

[Alexandroppolus]

Здесь абсолютно не нужен useState для url, потому как url зависит только от navigation.pathname и таким образом это просто вычисляемое значение. Из-за useState твой url "отстаёт на один рендер" от запроса данных - то есть на момент срабатывания useEffect с fetch значение url всегда "films". Потом ставится исправленный url, но fetch заново не вызывается - у него зависимости [].

Далее, надо учесть кейс, когда pathname может поменяться. Тогда надо перевызвать useEffect с fetch. Заодно есть смысл размещать данные в отдельных ячейках - это может предотвратить состояние гонки, плюс это будет легче типизировать.

Итого, упрощенно:

const {data, setData} = useState({});

const { pathname } = useLocation();
const apiPath = pathname === "/films" ? "films" :
       pathname === "/starships" ? "starships" :
       pathname === "/people" ? "people" :
       pathname === "/planets" ? "planets" : "";



useEffect(() => {
    const url = `https://swapi.dev/api/${apiPath}`;

    fetch(url)
      .then((res) => res.json())
      .then((resp) => {
        setData((data) => ({
           ...data,
           [apiPath]: resp.results,
        }));
      });
  }, [apiPath]);

.......
<Route path={"/films"} element={<Films value={data["films"]} />} />
.....

ну а внутри Films (и прочих) проверять что если value == null, то данные пока не загрузились, надо подождать.

можно ещё ошибку загрузки обработать, тут сам справишься.

Comments

[Владислав Хрущёв]

действительно интересный способ, прям классный. А что вы имете ввиду под подождать ?

что то вроде этого ?
if (value == null){
setTimeout (value, 1000)
}

[Alexandroppolus]

А что вы имете ввиду под подождать ?

в смысле, что пользователю надо подождать, пока загружаются данные. Об этом должен быть нарисован текст, или например крутящийся спиннер.

const Films = ({value}) => {
    if (!value) {
        return <div>загружаются данные о фильмах, подождите....</div>
    }

    // тут обычное рисование списка фильмов и т.д.
   .......
};

[Alexandroppolus]

действительно интересный способ, прям классный.

да самый обычный, по давно устоявшимся бестпрактисам реакта. Ничего нового.