Как перенести целые данные в одном массиве/объекте из мультивыборки в GitHub API с помощью useEffect в React.js/JavaScript?
Я новичок в React, и через несколько дней я действительно застрял. Моя цель - сделать поисковик, который после ввода, например, "katarzyna" во входном тексте, будет искать результаты в двух конечных точках: пользователи и репозитории сортируют их по идентификатору.
Я использую функциональные компоненты.
У меня несколько проблем:
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 в цикле карты?
API поиска GitHub не позволяет сортировать по идентификатору по параметру URL, поэтому я думаю, что мне следует сначала получить данные из API, объединить эти два результата, возможно, связать массив/объект с идентификаторами в качестве ключей, а затем отсортировать результаты по этим идентификаторам?
Я не знаю, как взять целые данные в одном массиве/объекте из запроса на множественную выборку с помощью useEffect? Я использую GitHub API в React. В console.log(data) я получаю два разных файла console.log с двумя разными объектами, один из первого URL-адреса, а второй - из второго URL-адреса. Но после отправки результатов другому компоненту
<UserProfile user={items}
Я получаю только один объект по реквизитуconst GetData = (props) => { console.log(props.searchResults);
Также я не понимаю, почему
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 Если у вас есть какие-либо идеи, как решить мои проблемы, сообщите мне об этом. :)