Ошибка типа: repos.map не является функцией

Question

Что не так в моем коде? У меня ошибка «repos.map не является функцией».
Я определяю массив репозитариев в своем состоянии, а затем пытаюсь перебрать его, но у меня все та же ошибка? Чего мне не хватает?
Это часть проекта Brad Traversy на udemy, его код, кажется, работает, но не мой; Я проверял свой код много раз, но все еще получал ошибку. пожалуйста помогите !!

class ProfileGithub extends Component {
  constructor(props) {
    super(props);

    this.state = {
      clientId: "0b3ee496731*****",
      clientSecret: "8a538c0d313959f2a81dab3ca******",
      count: 5,
      sort: "created: asc",
      //*repos array in the state*
      repos: []
    };
  }

  componentDidMount() {
    const { username } = this.props;
    const { count, sort, clientId, clientSecret } = this.state;

    fetch(
      `https://api.github.com/${username}/repos?per_page=${count}&sort=${sort}&client_id=${clientId}&client_secret=${clientSecret}`
    )
      .then(res => res.json())
      .then(data => {
        if (this.refs.myRef) {
          this.setState({ repos: data });
        }
      })
      .catch(err => console.log(err));
  }

  render() {
    const { repos } = this.state;

    //*trying to loop through it*
    const repoItems = repos.map(repo => (
      <div key={repo.id} className="card card-body mb-2">
        <div className="row">
          <div className="col-md-6">
            <h4>
              <Link to={repo.html_url} className="text-info" target="_blank">
                {repo.name}
              </Link>
            </h4>
            <p>{repo.description}</p>
          </div>
          <div className="col-md-6">
            <span className="badge badge-info mr-1">
              Stars: {repo.stargazers_count}
            </span>
            <span className="badge badge-secondary mr-1">
              Watchers: {repo.watchers_count}
            </span>
            <span className="badge badge-success">
              Forks: {repo.forks_count}
            </span>
          </div>
        </div>
      </div>
    ));

    return (
      <div ref="myRef">
        <hr />
        <h3 className="mb-4">Latest Github Repos</h3>
        {repoItems}
      </div>
    );
  }
}

Answer 1

const { repos } = this.state.repos;

Вы звоните .map на объекте. state является объектом, а repos является членом state.

Но, если вы хотите отобразить state, объект, вы должны сделать что-то вроде этого:

const repoItems = Object.keys(repos).map( repoKey => {
    // Now you are using the keys of the object as an array
    // so you can access each object like this:
    // { repos[repoKey].member_name }

    // for instance, in your code above, the first line in the map would be this:
    <div key={repo[repoKey].id} className="card card-body mb-2">

    // ...and then later...
    <Link to={repo[repoKey].html_url} className="text-info" target="_blank">
        {repo[repoKey].name}
    </Link>
})

Answer 2

Большое спасибо, ребята, за ваши предложения, но проблема была в URL-адресе, я что-то упустил ... Большое спасибо

Answer 3

Как указано Thiago Sun , параметр данных здесь может не быть массивом. Возможно, вам придется это проверить.

.then(data => {
    if (this.refs.myRef) {
      this.setState({ repos: data });
    }
})