Getting the TypeError: repos.map is not a function

Question

我在单击按钮查看用户配置文件时遇到此错误，因为它是 public 获取路径，但问题似乎在于此人提供了错误的 GitHub 用户名链接到他的帐户，但我尝试创建一个 if 语句，以检查用户提供的内容是否错误或正确，但似乎不是完全可以工作。

下面是错误和其他文件。

TypeError: repos.map is not a function

ProfileGithub.render

C:/Users/User/Desktop/Dead end practice/MERN/client/src/components/profile/ProfileGithub.js:36
  33 | render() {
  34 |   const { repos } = this.state;
  35 |   
> 36 |     const repoItems = repos.map(repo => (
     | ^  37 |      <div key={repo.id} className="card card-body mb-2">
  38 |       <div className="row">
  39 |         <div className="col-md-6">
View compiled
finishClassComponent
C:/Users/User/Desktop/Dead end practice/MERN/client/node_modules/react-dom/cjs/react-dom.development.js:18483
  18480 | } else {
  18481 |   {
  18482 |     setCurrentPhase('render');
> 18483 |     nextChildren = instance.render();
        | ^  18484 | 
  18485 |     if (debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
  18486 |       instance.render();
View compiled
updateClassComponent
C:/Users/User/Desktop/Dead end practice/MERN/client/node_modules/react-dom/cjs/react-dom.development.js:18438
  18435 |   shouldUpdate = updateClassInstance(current$, workInProgress, Component, nextProps, renderExpirationTime);
  18436 | }
  18437 | 
> 18438 | var nextUnitOfWork = finishClassComponent(current$, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime);
        | ^  18439 | {
  18440 |   var inst = workInProgress.stateNode;
  18441 | 
View compiled

ProfileGithub.js 文件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

class ProfileGithub extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clientId: 'xxxxxxxxxxxxxx',
      clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      count: 5,
      sort: 'created: asc',
      repos: []
    };
  }

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

    fetch(
      `https://api.github.com/users/${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;

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

ProfileGithub.propTypes = {
  username: PropTypes.string.isRequired
};

export default ProfileGithub;

Answer 1

发生这种情况是因为当数据从请求返回并且它不是数组时，你用它来设置状态，这会给你一个错误。

.then(data => {
    if (this.refs.myRef) {
        //                 the data isn't an array
        this.setState({ repos: data });
    }
 })

请在调用 setState 之前检查 data 是什么。它需要是一个数组才能工作。

如果您向 github api 发送无效请求，您将收到此

这是一个对象，这可能就是您收到错误的原因。

您可以检查 if(data.message){ /* handle api request error */}，这样它会显示一个错误并且不会用该错误更新 repos 状态。

和

您还应该检查 repos 是否不是 null 或 undefined。

你应该改变

const repoItems = repos.map(repo => (

到

const repoItems = repos && repos.map(repo => (

Getting the TypeError: repos.map is not a function

Getting the TypeError: repos.map is not a function

javascript

reactjs

react-redux

mern