Как перенести целые данные в одном массиве/объекте из мультивыборки в GitHub API с помощью useEffect в React.js/JavaScript?

Я новичок в React, и через несколько дней я действительно застрял. Моя цель - сделать поисковик, который после ввода, например, "katarzyna" во входном тексте, будет искать результаты в двух конечных точках: пользователи и репозитории сортируют их по идентификатору.

Я использую функциональные компоненты.

У меня несколько проблем:

  1. API поиска GitHub возвращает только глобальную информацию, например, о пользователях https://api.github.com/search/users?q=katarzyna&per_page=4&page=1 , но мне нужна подробная информация, такая как биография или имя, которые можно найти в https://api.github.com/users/sealionkat , поэтому я думаю, что мне следует сначала подключиться к этому первому URL-адресу, взять «url» из него и, во-вторых, подключиться к API целевого URL-адреса, чтобы получить больше информации об этом человеке. Но я не уверен, как это сделать в React, в другом компоненте с помощью реквизитов со списком URL-адресов, а затем подключиться к API в цикле карты?

  2. API поиска GitHub не позволяет сортировать по идентификатору по параметру URL, поэтому я думаю, что мне следует сначала получить данные из API, объединить эти два результата, возможно, связать массив/объект с идентификаторами в качестве ключей, а затем отсортировать результаты по этим идентификаторам?

  3. Я не знаю, как взять целые данные в одном массиве/объекте из запроса на множественную выборку с помощью useEffect? Я использую GitHub API в React. В console.log(data) я получаю два разных файла console.log с двумя разными объектами, один из первого URL-адреса, а второй - из второго URL-адреса. Но после отправки результатов другому компоненту <UserProfile user={items}Я получаю только один объект по реквизиту const GetData = (props) => { console.log(props.searchResults);

  4. Также я не понимаю, почему console.log(fetchUrls);заходит в консоль 5 раз...:

Компонент ResultsGetData.js выглядит так:

      import { useEffect, useState } from "react";
import GetData from "./GetData";

const GITHUB_URL = process.env.REACT_APP_GITHUB_URL;
const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN;

const ResultsGetData = (props) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

    const  fetchUrls = [
        GITHUB_URL + "search/users?q=" + props.q + "&per_page=4&page=1", //remove per page
        GITHUB_URL + "search/repositories?q=" + props.q + "&per_page=4&page=1",
      ];

console.log(fetchUrls);

  useEffect(() => {
      Promise.all(
        //renders twice
        fetchUrls.map((url) =>
          fetch(url, {
            headers: {
              Authorization: `token ${GITHUB_TOKEN}`,
            },
          })
            .then((response) => response.json())
            .then((data) => {
              setItems(data);
              setIsLoaded(true);
            })
        )
      );
  }, []);
  
console.log(items);

  if(isLoaded){
      return <GetData searchResults={items} />;
  }
};

export default ResultsGetData;

Вот полный репозиторий, я новичок в React, поэтому любые комментарии очень приветствуются: https://github.com/kasiorzynka/github-finder/tree/UserProfile Если у вас есть какие-либо идеи, как решить мои проблемы, сообщите мне об этом. :)

0 ответов

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