显示来自特定存储库的 Github API 的拉取请求列表

Question

我正在重做我之前的问题。我正在开发一个显示来自 github api 的存储库列表的项目。

工作正常，我从 api 获取所有回购信息，但我需要当我从特定存储库中单击一个按钮时，它会显示来自 https://api.github.com/repos/:USER:/:REPONAME:/pulls 的拉取请求信息我制作的模态。

但我不知道该怎么做。有人可以帮助我吗？

import React, { Component } from "react";
import axios from "axios";
import Navbar from "./components/Navbar";
import Modal from "react-modal";

class App extends Component {
  constructor() {
    super();
    this.state = {
      githubData: [],
      isActive: false
    };
  }
  componentDidMount() {
    axios
      .get(
        "https://api.github.com/search/repositories?q=language:Java&sort=stars&page=1"
      )
      .then((res) => {
        console.log("res", res);
        this.setState({ githubData: res.data.items });
      });

    Modal.setAppElement("body");
  }

  toggleModal = () => {
    this.setState({
      isActive: !this.state.isActive
    });
  };

  render() {
    const { githubData } = this.state;
    return (
      <div className="container">
        <Navbar />
        <div className="row">
          {githubData.map((name, index) => (
            <div className="col-md-12" key={name.id}>
              <img src={name.owner.avatar_url} alt="Imagem do projeto" />
              <h1>
                Projeto:&nbsp;
                {name.name}
              </h1>
              <h1>
                Autor:&nbsp;
                {name.owner.login}
              </h1>
              <h1>
                Descrição:&nbsp;
                {name.description}
              </h1>
              <h1>
                Link:&nbsp;
                <a href={name.homepage}>{name.homepage}</a>
              </h1>
              <h1>
                Stars:&nbsp;
                {name.stargazers_count}
              </h1>
              <button onClick={this.toggleModal}>
                Open pull request for this repository
              </button>
              <Modal
                isOpen={this.state.isActive}
                onRequestClose={this.toggleModal}
              >
                <p onClick={this.toggleModal}>
                  PULL REQUEST LIST FROM THIS REPOSITORY
                </p>
              </Modal>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

模式正在运行，我只需要从 api 获取拉取请求信息，但不知道如何从特定存储库获取。

Answer 1

一段时间后，我成功了。

我刚刚创建了一个新组件，使用 axios 调用 github api 并将用户和 repo 作为 props 传递。

代码如下：

import React from "react";
import axios from "axios";

const PullRequest = (props) => {
  axios
    .get(
      "https://api.github.com/repos/" + props.user + "/" + props.repo + "/pulls"
    )
    .then((repo) => {
      console.log("repo", repo);
    });
  return (
    <div>
      <p>Nome do repositório: {props.repo}</p>
      <p>Nome do usuário: {props.user}</p>
    </div>
  );
};

export default PullRequest;

干杯:)

Answer 2

查看我的 GitHub 开源项目，我就是这样做的，而且更多的是使用 Node.js REST 服务器：

https://github.com/ConfusedDeer/Git-Captain

这是一个如何使用 Node.js 的示例（完整示例请参阅 GitHub 项目）：

else if ((appName === 'gitCaptain') && (webServ === 'searchForPR')) //create Branches
    {
        var urlForPRsearch = gitHubAPIendpoint + "/repos/" + orgName + "/" + req.body.repo + "/pulls?" + "state=" + req.body.state + "&base=" + req.body.prBaseBranch + "&" + req.body.token;

        // noinspection JSDuplicatedDeclaration
        var options = {
            method: 'GET',
            url: urlForPRsearch,
            headers: {
                'User-Agent': 'request'
            }
        };

        function callbackForPRSearch(error, response) {
            if (!error && response.statusCode === 200) {
                res.send(response);
            }
            else {
                res.send(response); //send back response if not 200, but needs to be updated to handle exception.
            }
        }

        request(options, callbackForPRSearch);
    }

显示来自特定存储库的 Github API 的拉取请求列表

Show pull request list with Github API from a specific repository

github-api

reactjs