Fatal编程技术网
  • javascript/
  • Javascript 对GithubApi获取贡献者的UseEffect问题作出反应

Javascript 对GithubApi获取贡献者的UseEffect问题作出反应

javascript reactjs github

Javascript 对GithubApi获取贡献者的UseEffect问题作出反应,javascript,reactjs,github,react-hooks,use-effect,Javascript,Reactjs,Github,React Hooks,Use Effect,感谢任何能帮助我的人。我知道有useEffect重新渲染的问题是很常见的。 然而，在我的例子中，我使用[]括号将其设置为仅渲染一次，但它会继续重新渲染所有内容 我正在RepoItem.js组件中调用getRepoContributors（）函数 我正在使用GithubAPI。我能够显示用户信息和用户回复。 但当我试图为某个用户的repo获取贡献者时，它会不断地重新渲染 我想不出来。由于Github API由于多个请求而禁止我，并且每次都需要等待大约一个小时才能重试，因此我浪费了一整天的时间 更新

感谢任何能帮助我的人。我知道有useEffect重新渲染的问题是很常见的。 然而，在我的例子中，我使用[]括号将其设置为仅渲染一次，但它会继续重新渲染所有内容

我正在RepoItem.js组件中调用getRepoContributors（）函数

我正在使用GithubAPI。我能够显示用户信息和用户回复。 但当我试图为某个用户的repo获取贡献者时，它会不断地重新渲染

我想不出来。由于Github API由于多个请求而禁止我，并且每次都需要等待大约一个小时才能重试，因此我浪费了一整天的时间

更新：第2天 还是不能让它工作。现在尝试从Repos.js组件进行渲染。 但我收到一条错误消息。 我在RepoItem.js中注释了我第一次尝试使用的useeeffect不起作用

“呈现不同组件（
Repos
）时无法更新组件（
GithubState
）。”

请帮忙！快发疯了！这是我的更新文件

GithubState.js（上下文提供程序）


从“React”导入React，{useReducer}；
从“axios”导入axios；
从“/GithubContext”导入GithubContext；
从“/GithubReducer”导入GithubReducer；
导入{
搜索用户、设置加载、清除用户、获取用户、获取回购、，
获取贡献者、筛选报告、清除筛选报告
}来自“./类型”；
让我们来看看客户；
让你的客户保守秘密；
.....
.....
常量GithubState=（道具）=>{
常量初始状态={
用户：[]，
用户：{}，
回购协议：[]，
贡献者：[]，
加载：false，
filteredepos:null，
错误：null，
};
const[state，dispatch]=useReducer（GithubReducer，initialState）；
//搜索用户
const searchUsers=异步（文本）=>{
设置加载（）；
const res=等待axios.get(
`https://api.github.com/search/users?q=${text}&client_id=${githubClientId}&client_secret=${githubClientSecret}`
);
//res.data.items是来自Github API的响应
派遣({
类型：搜索用户，
有效载荷：res.data.items，
});
};
//清除用户
常量clearUsers=（）=>{
分派（{type:CLEAR_USERS}）；
};
//设置加载
常量setLoading=（）=>{
分派（{type:SET_LOADING}）；
};
//获取1个用户
const getUser=async（用户名）=>{
设置加载（）；
const res=等待axios.get(
`https://api.github.com/users/${username}？客户端\u id=${githubClientId}和客户端\u secret=${githubClientSecret}`
);
log（`getUser res.data`，res.data）；
分派（{type:GET_USER，payload:res.data}）；
};
//获得回购
const getUserRepos=async（用户名）=>{
设置加载（）；
const res=等待axios.get(
`https://api.github.com/users/${username}/repos？sort=created:asc&client\u id=
${githubClientId}&客户机密钥=
${githubClientSecret}`
);
log（`getUserRepos res.data`，res.data）；
派遣({
类型：GET_REPOS，
有效载荷：res.data，
});
};
//获取回购贡献者
const GetRepoContractors=async（全名）=>{
设置加载（）；
const res=等待axios.get(
`https://api.github.com/repos/${full\u name}/contributors？客户端id=${githubClientId}和客户端密码=${githubClientSecret}`
);
log（`getRepoContributors`，res.data）；
派遣({
类型：获取贡献者，
有效载荷：res.data，
});
};
//过滤回购
常量filterRepos=（文本）=>{
分派（{type:FILTER_REPOS，payload:text}）；
};
//透明过滤器
常量clearFilterRepos=（文本）=>{
分派（{type:CLEAR\u FILTER\u REPOS}）；
};
返回(
{props.children}
);
};
导出默认状态；
App.js


import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import GithubState from "./contexts/github/GithubState";
import Home from "./components/pages/Home";
import User from "./components/users/User";

import "./App.css";

const App = () => {
  return (
    <GithubState>
        <Router>
          <div className="App">
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/user/:login" component={User} />
              </Switch>
          </div>
        </Router>
    </GithubState>
  );
};

export default App;


从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“/contexts/github/GithubState”导入GithubState；
从“/components/pages/Home”导入主页；
从“/components/users/User”导入用户；
导入“/App.css”；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；
User.js

import React, { useContext, useEffect } from "react";
import Spinner from "../layout/Spinner";
import Repos from "../repos/Repos";
import ReposFilter from "../repos/ReposFilter";
import { Link } from "react-router-dom";
import GithubContext from "../../contexts/github/githubContext";

const User = ({ match, iconGithub }) => {
  const githubContext = useContext(GithubContext);

  const { getUser, loading, user, repos, getUserRepos, getRepoContributors
  } = githubContext;

  useEffect(() => {
    getUser(match.params.login);
    getUserRepos(match.params.login);
  }, []);

  const { name, avatar_url, location, public_repos } = user;

  if (loading) return <Spinner />;

  return (
    <div className="userpage-container">
     .........
     <div className="card grid-2">
        <div>
         .............
          <h1>{name}</h1>
          <p>Location : {location}</p>

          <div className="card text-center">
           ............
            <div className="badge">
              Public Repos: : {public_repos}
            </div>
          </div>
        </div>
        ............ 
      </div>

      <ReposFilter />
      <Repos repos={repos} />
    </div>
  );
};

export default User;


import React，{useContext，useffect}来自“React”；
从“./布局/微调器”导入微调器；
从“./Repos/Repos”导入回购；
从“./repos/ReposFilter”导入ReposFilter；
从“react router dom”导入{Link}；
从“../../contents/github/GithubContext”导入GithubContext；
常量用户=（{match，iconGithub}）=>{
const githubContext=useContext（githubContext）；
常量{getUser，加载，用户，repos，getUserRepos，getreposcontributors
}=上下文；
useffect（（）=>{
getUser（match.params.login）；
getUserRepos（match.params.login）；
}, []);
const{name，avatar\u url，location，public\u repos}=用户；
如果（装载）返回；
返回(
.........
.............
{name}
位置：{Location}

............
公共回购：{Public_Repos}
............ 
);
};
导出默认用户；
Repos.js


import React, { useContext, useEffect, useState } from "react";
import RepoItem from "./RepoItem";
import RepoItemPacha from "./RepoItemPacha";
import GithubContext from "../../contexts/github/githubContext";
import Spinner from "../layout/Spinner";

const Repos = () => {
  const githubContext = useContext(GithubContext);

  const [repoContributors, setRepoContributors] = useState();

  const {
    repos,
    filteredRepos,
    loading,
    contributors,
    getRepoContributors,
  } = githubContext;

  if (repos !== null && repos.length === 0 && !loading) {
    return <h4>No repos to show</h4>;
  }

  return (
    <div className="text-center">
      <>
        {repos !== null && !loading ? (
          <div>
            {filteredRepos !== null
              ? filteredRepos.map((repo) => (
                  <div key={repo.id} className="item">
                    <RepoItemPacha repo={repo} />
                  </div>
                ))
              : repos.map((repo) => (
                  <div key={repo.id} className="item">
                    {repo && getRepoContributors(repo.contributors_url)}
                    {contributors.map((contr) => (
                      <div key={contr.id} className="item">
                        <h3>{contr.login}</h3>
                      </div>
                    ))}
                    <RepoItemPacha repo={repo} />
                  </div>
                ))}
          </div>
        ) : (
          <Spinner />
        )}
      </>
    </div>
  );
};

export default Repos;



从“React”导入React，{useContext，useEffect，useState}；
从“/RepoItem”导入RepoItem；
从“/RepoItemPacha”导入RepoItemPacha；
从“../../contents/github/GithubContext”导入GithubContext；
从“./布局/微调器”导入微调器；
常数回购=（）=>{
const githubContext=useContext（githubContext）；
const[repocaters，setrepocaters]=useState（）；
常数{
回购协议
过滤器，
加载，
贡献者，
GetRepositors，
}=上下文；
if（repos！==null&&repos.length===0&&！正在加载）{
不返回要显示的回购协议；
}
返回(
{repos！==null&&！正在加载(
{filteredepos！==null
？filteredRepos.map（（回购）=>(


import React, { useContext, useEffect, useState } from "react";
import RepoItem from "./RepoItem";
import RepoItemPacha from "./RepoItemPacha";
import GithubContext from "../../contexts/github/githubContext";
import Spinner from "../layout/Spinner";

const Repos = () => {
  const githubContext = useContext(GithubContext);

  const [repoContributors, setRepoContributors] = useState();

  const {
    repos,
    filteredRepos,
    loading,
    contributors,
    getRepoContributors,
  } = githubContext;

  if (repos !== null && repos.length === 0 && !loading) {
    return <h4>No repos to show</h4>;
  }

  return (
    <div className="text-center">
      <>
        {repos !== null && !loading ? (
          <div>
            {filteredRepos !== null
              ? filteredRepos.map((repo) => (
                  <div key={repo.id} className="item">
                    <RepoItemPacha repo={repo} />
                  </div>
                ))
              : repos.map((repo) => (
                  <div key={repo.id} className="item">
                    {repo && getRepoContributors(repo.contributors_url)}
                    {contributors.map((contr) => (
                      <div key={contr.id} className="item">
                        <h3>{contr.login}</h3>
                      </div>
                    ))}
                    <RepoItemPacha repo={repo} />
                  </div>
                ))}
          </div>
        ) : (
          <Spinner />
        )}
      </>
    </div>
  );
};

export default Repos;




import React, { useEffect, useContext, useState } from "react";
import GithubContext from "../../contexts/github/githubContext";

const RepoItemPacha = ({ repo }) => {
  const githubContext = useContext(GithubContext);

  const [repoContributors, setRepoContributors] = useState();

  const { getRepoContributors, contributors, repos } = githubContext;

  // useEffect(() => {
  //   if (repo) {
  //     getRepoContributors(repo.contributors_url);
  //     console.log(
  //       `getRepoContributors(repo.contributors_url)`,
  //       getRepoContributors(repo.contributors_url)
  //     );
  //   }
  // }, [repo]);

  // useEffect(() => {
  //   if (contributors) {
  //     setRepoContributors(contributors);
  //   }
  // }, []);

  // let theContributors = [getRepoContributors(repo.full_name)];

  return (
    <div className="card">
      <h3>
        <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
          {repo.name}
        </a>
      </h3>
      <h4>{repo.collaborators_url}</h4>

      {/* {repoContributors &&
        repoContributors.map((contr) => (
          <div key={contr.id} className="item">
            <h3>{contr.login}</h3>
          </div>
        ))} */}

      {repo.description && (
        <p>
          <strong>Description: </strong>
          {repo.description}
        </p>
      )}
      <p></p>
      {repo.language && (
        <p>
          <strong>Language: </strong>
          {repo.language}
        </p>
      )}
    </div>
  );
};

export default RepoItemPacha;