javascript - react GitHub repo API

Question

我正在研究允许用户输入用户名并在 repolist 组件内的单独 React 组件中显示该用户的所有 github 存储库。

我可以获得所有存储库的 JSON 数据，但我无法遍历对象以显示每个存储库的卡片，我不知道如何引用对象内嵌套的数据。

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

应用程序.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

表单.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>
            )
        }
    }

卡片.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>
            );
        }
    }

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>
    );

编辑:目前的截图

Answer 1

首先，您需要查看您发出的请求的结果。

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

在每个请求中，您都会获得一个用户的存储库数组。

您正在存储某个用户的所有存储库，因此您有一个用户存储库数组。 (数组的数组)

在执行profiles.map(profile => ...)时，profile是一个repos数组。您无法访问 profile.id。

您可以在另一个 .map 中执行一个 .map 的操作。

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

这将列出所有用户的所有 repo 。

---

如果这不是您想要的，并且您只想显示一个用户的所有存储库，则需要传递给 CardList，只有一个配置文件。

<CardList profiles={this.state.profiles[indexOfTheProfileYouWantToDisplay]} />