Question

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

错误：

未捕获（承诺）TypeError：this.props.repos.map不是函数

未捕获（承诺）TypeError：无法读取属性＆＃39; _currentElement＆＃39;为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;

Answer 1

解决了问题！

大家好，感谢您的帮助！

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

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

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

我刚刚纠正了

<UserRepos repos={props.repos} />

没有引号！

万分感谢!!!

Answer 2

您可以通过执行以下操作来修复错误：

ncap2 -s 'fire=byte(fire)' CAMS_2003-2017_frp_mask2_africa_zip.nc test.nc

如果render: function () { var reposArray=this.props.repos || []; var repos = reposArray.map(function (repo, key) { ... ... ....不是数组（可能是this.props.repos），它会将undefined变量初始化为空数组。

Answer 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

Answer 4

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

您尚未正确传递 repos 道具。检查父方法这个。
repos 并不总是一个数组。在将数据分配给此变量之前，请查看如何初始化它。您最初可以将其设置为 let repos = [];在获取任何数组之前将其作为空数组数据。

此外，如果您是React的新手，最终选择 PropTypes ，它们可以帮助您解决组件安装方面的这些问题。

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

错误：未捕获（在承诺中）TypeError：this.props.repos.map不是函数

4 个答案: