Question

我正在尝试显示用户存储库的列表。通过传播操作员尝试拼写对象。但是，我不知道这是否是一个好方法，控制台中没有错误，但是屏幕上没有任何显示。这是我的代码。

class ItemUserDetail extends React.Component {
  constructor() {
    super();
    this.state = {
      usersRepos: []
    };
  }

  componentDidMount() {
    const { user } = this.props.match.params;
    const url = `https://api.github.com/users/${user}/repos`;
    fetch(url)
      .then(res => res.json())
      .then(json => this.setState({ usersRepos: json }));
  }

  render() {
    const Repos = this.state.usersRepos ? { ...this.state.usersRepos } : null;
    return (
      <div>
        <p>{Repos.name}</p>
      </div>
    );
  }
}

export default ItemUserDetail;

Answer 1

由于您要返回存储库数组，因此您的render方法应如下所示

render() {
  const Repos = this.state.usersRepos ? this.state.usersRepos : null; // you don't need this
  const { userRepos } = this.state; // destructure 
  return (
      <div>
        {userRepos.map(repo => <p key={repo.id}>{repo.name}</p>)}
      </div>
  );
}

使用GitHub API进行数据显示

1 个答案: