我正在研究允许用户输入用户名并在 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>
);
最佳答案
首先,您需要查看您发出的请求的结果。
[
{
"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]} />
关于javascript - react GitHub repo API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59326880/