Javascript React GitHub Repo API

我正在开发一种允许用户输入用户名并在repolist组件中的一个单独的react组件中显示该用户的所有github repo的功能

我可以获得所有repo的JSON数据，但是我不能遍历对象来显示每个repo的卡片，我不知道如何引用嵌套在对象中的数据

我应该注意到testData最初是用测试数据填充的，我只能作为一维数组而不是对象来工作

App.js：

    import React from 'react';
    import { CardList } from './Components/CardList.js';
    import { testData } from './Components/Card.js'
    import { Form } from './Components/Form.js'; 
    import './App.css';

    class App extends React.Component {

      state = {
        profiles: testData,
      };
      addNewSearch = (searchData) => {
        this.setState(prevState => ({
          profiles: [...prevState.profiles, searchData],
        }))
      };

      render() {
        return (
          <div className="App">
            <header className="App-header">
            <div>{this.props.title}</div>
              <div className=" search-box" style={{textAlign: 'center'}}>
                <Form onSubmit={this.addNewSearch}/>
              </div>
              <div className="bgbox rounded">

                <div className="cardbox">
                  <CardList profiles={this.state.profiles} />
                </div>
              </div>
            </header>
          </div>
        );
      }
    }

    export default App

从“React”导入React；
从“./Components/CardList.js”导入{CardList}；
从“./Components/Card.js”导入{testData}
从'./Components/Form.js'导入{Form}；
导入“/App.css”；
类应用程序扩展了React.Component{
状态={
简介：testData，
};
addNewSearch=（搜索数据）=>{
this.setState（prevState=>({
配置文件：[…prevState.profiles，searchData]，
}))
};
render（）{
返回(
{this.props.title}
);
}
}
导出默认应用程序

Form.js

    import React from 'react';
    import axios from 'axios';

    export class Form extends React.Component {
        state = { userName: '' };
        handleSubmit = async (event) => {
            event.preventDefault();
            const resp = await
            axios.get(`https://api.github.com/users/${this.state.userName}/repos?per_page=250`)
            this.props.onSubmit(
                resp.data
            );

        };
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <div className="btn-group">
                        <input type="text" value={this.state.userName} className="form-control" placeholder="GitHub User" onChange={event => this.setState({userName: event.target.value })}></input>
                        <button className="btn btn-dark">Go!</button>
                    </div>
                </form>
            )
        }
    }

从“React”导入React；
从“axios”导入axios；
导出类表单扩展了React.Component{
状态={用户名：'}；
handleSubmit=异步（事件）=>{
event.preventDefault（）；
const resp=等待
axios.get(`https://api.github.com/users/${this.state.userName}/repos？per_page=250`）
这个.props.onSubmit(
响应数据
);
};
render（）{
返回(
this.setState（{userName:event.target.value}）}>
走！
)
}
}

Card.js

    import React from 'react';

    export const testData = [];


    export class Card extends React.Component {
        render() {
            const repo = this.props;
            return (
                <div className="card border-secondary mb-3" style={{ width: '20rem', fontSize: '12px'}}>
                    <h5 className="card-header">{repo.name}</h5>
                    <div className="card-body text-secondary">
                        <p className="card-text">{repo.name}</p>
                    </div>
                </div>
            );
        }
    }

从“React”导入React；
export const testData=[]；
导出类卡扩展React.Component{
render（）{
const repo=this.props；
返回(
{repo.name}
{repo.name}
);
}
}

CardList.js

    import React from 'react';
    import { Card } from './Card.js'

    export const CardList = (props) => (
        <div>
            {props.profiles.map(profile => <Card key={profile.id} {...profile} />)}
        </div>
    );

从“React”导入React；
从“./Card.js”导入{Card}
导出常量卡片列表=（道具）=>(
{props.profiles.map（profile=>）}
);

编辑：当前外观的屏幕截图

---

首先，您需要看到这是您提出的请求的结果

[
  {
    "id": 123456,
    "name": "bla-bla-repo",
    ...
  },
  ...
]

在每个请求中，您都会得到一个用户的repo数组

您正在存储某个用户的所有repo，因此您有一个用户repo数组。（数组的数组）

在执行

profiles.map（profile=>…）

时，

profile

是一个repo数组。您无法访问

profile.id

您可以在另一个

.map

中执行的

.map

操作

{props.profiles.map(profile => profile.map(repo => <Card key={repo.id} repo={repo} />))}

---

嗨，这太完美了。我将您的最后一行添加到我的App.js中，并对其进行了更改，使其仅呈现一个卡片列表。我添加了一行虚拟数据，这样它就可以显示一些东西，否则就会出错。当我搜索用户名时，它用repo列表替换了虚拟数据！请问，当数组中没有[0]时，你知道如何阻止它抛出错误吗？@HollowA你应该做一些检查，比如

this.state.profiles&&this.state.profiles[0]

，因为

profiles

可以是

null

或

未定义的
。您应该在每次使用
.map
时进行此检查，也可以在
{props.profiles&&props.profiles.map（…）
<CardList profiles={this.state.profiles[indexOfTheProfileYouWantToDisplay]} />