错误：未捕获（承诺中）类型错误：this.props.repos.map 不是函数答案

【问题标题】：Error: Uncaught (in promise) TypeError: this.props.repos.map is not a function错误：未捕获（承诺中）类型错误：this.props.repos.map 不是函数
【发布时间】：2017-07-26 16:19:28
【问题描述】：

我是 React 新手，但我正在构建一个简单的应用程序来搜索 GitHub 用户，只需输入他们的用户名。它必须为我提供有关用户及其各自存储库的信息，但我的代码有问题：

错误：

Uncaught (in promise) TypeError: this.props.repos.map is not a function

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null

代码：

var React = require('react');
var UserRepos = React.createClass({
    getInitialState: function () {

        return {
            reposCount: 0,
        }
    },
    componentWillReceiveProps: function (props) {
        console.log(props);
        this.setState({reposCount: props.repos.length});
    },

    render: function () {
       var repos = this.props.repos.map(function (repo, key) {
            return (
                <div key={key} className="thumbnail">
                    <div className="caption">
                        <h3>{repo.name}
                            <span className="badge">{repo.stargazers_count} STARS</span>
                        </h3>
                        <p>{repo.description}</p>
                        <p>
                            <a href={repo.html_url} className="btn btn-primary" role="button">Repository</a>
                            <a href={repo.html_url + '/issues'} className="btn btn-default" role="button">Issues ({repo.open_issues}) </a>
                        </p>
                    </div>
                </div>
            );
        });
               return (
                   <div>
                       <h2>{this.state.reposCount} repositories</h2>
                       {repos}
                   </div>
               )
    }
});

module.exports =UserRepos;

【问题讨论】：

这意味着你用来初始化props.repos的东西不是一个数组。
渲染函数中的 this.prop.repos 有什么价值
你的渲染在你的 props.repos 设置之前被调用。在渲染中，通过检查 props.repos 是否存在来解决此问题；如果没有，则将其设置为空数组。当 props.repos 被创建后，渲染将被再次调用，然后就可以正常工作了。

标签： javascript node.js reactjs

【解决方案1】：

问题解决了！

大家好，感谢您的帮助！

这是一个初学者错误！！！

在名为 UserInfo.js 的 js 文件中，我有一个道具：

<UserRepos repos="{props.repos}" />

我刚刚纠正了它

<UserRepos repos={props.repos} />

没有引号！

谢谢一百万！！！

【讨论】：

【解决方案2】：

您可以通过这样做来修复错误：

render: function () {
var reposArray=this.props.repos || [];
       var repos = reposArray.map(function (repo, key) {
...
...
....

这会做的是，如果this.props.repos 不是数组（可能是undefined），它会将reposArray 变量初始化为空数组。

【讨论】：

确实使用默认道具获得相同的结果要好得多。

【解决方案3】：

这个错误意味着this.props.repos 不是一个数组。所以首先确保传递给组件的 repos 是一个数组：

<UserRepos repos={[repo1, repo2, ...]} />

另外我想建议你声明组件的 propTypes：

import React from 'react';
import PropTypes from 'prop-types';

export default React.createClass({
  propTypes: {
    repos: PropTypes.array,
  },

  getDefaultProps() {
    return {
      repos: [],
    };
  },

  ...
});

注意：您需要为此安装prop-types：npm install --save prop-types

【讨论】：

【解决方案4】：

我同意其他人关于您的问题很可能是以下之一：

您没有正确传递 repos 属性。检查父方法对于这个。
repos 并不总是一个数组。在将数据分配给此变量之前，请查看如何对其进行初始化。您最初可以将其设置为 let repos = []; 在获得任何数据之前将其作为一个空数组数据。

此外，如果您是 React 新手，请务必使用 PropTypes，它们是救命稻草，可以帮助您在组件安装时发现这类问题。

这是我对您的问题 (ES6) 的看法：https://jsfiddle.net/Lx9gfj5f/3/

【讨论】：