0

我是 React 的新手，几天后我真的被困住了。我的目标是让搜索器在输入文本中输入例如“katarzyna”后，将在两个端点中搜索结果：用户和存储库按 id 对它们进行排序。

我正在使用功能组件。

我有几个问题：

  1. GitHub 搜索 API 仅返回有关例如用户https://api.github.com/search/users?q=katarzyna&per_page=4&page=1的全局信息，但我需要一些详细信息，例如简历或名称，可以在https 中找到： //api.github.com/users/sealionkat，所以我认为我应该首先连接第一个 url，从中获取“url”，然后连接目标 url API 以获取有关该人的更多信息。但是我不确定如何在 React 中通过带有 url 列表的道具在另一个组件中执行此操作，然后在地图循环中与 API 连接？

  2. GitHub search API 不支持通过 url 参数按 id 排序，所以我认为我应该首先从 API 中获取数据，合并这两个结果，也许通过将数组/对象与 id 作为键关联，然后按这些 id 对结果进行排序？

  3. 我不知道如何使用 useEffect 从多提取查询中获取一个数组/对象中的全部数据？我在 React 中使用 GitHub Api。在 console.log(data) 我得到两个不同的 console.logs 有两个不同的对象，一个来自第一个 url，第二个来自第二个 url。但是在将结果发送到另一个组件之后，<UserProfile user={items}我通过道具只得到一个对象const GetData = (props) => { console.log(props.searchResults);

  4. 另外我不明白为什么console.log(fetchUrls);登录控制台5次......：

useEffect/useState 组件中的多渲染 console.log()

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 如果你有任何想法如何解决我的问题，请让我知道:)

4

0 回答 0