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

-2

我是React中的新成员，但我构建了一个简单的应用程序来搜索GitHub用户只需输入用户名。它必须给我关于用户和他们各自的资源库的信息，但我有一个问题白衣代码：错误：未被捕获（承诺）TypeError：this.props.repos.map不是函数

错误：

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;

来源

2017-07-26 Silvio Custodio

这意味着无论你用什么来初始化'props.repos'都不是一个数组。 – Pointy

你在渲染函数中为this.prop.repos获取了什么值 –

在你的props.repos被设置之前你的渲染被调用。在渲染中，通过检查props.repos是否存在来解决这个问题;如果不是，则将其设置为空数组。当props.repos确实被创建时，渲染将被再次调用，然后会正常工作。 –

问题解决了！

嗨，大家好，感谢您的帮助！

这是一个初学者的错误！

在我有一个道具js文件名为UserInfo.js是：

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

我只是纠正它

<UserRepos repos={props.repos} />

没有引号！

非常感谢！

来源

2017-07-26 23:58:57

-1

您可以通过执行修正错误这个：

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

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

来源

2017-07-26 16:26:02

事实上，使用默认道具要获得相同结果要好得多。 –

-1

此错误表示this.props.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

来源

2017-07-26 16:31:42

-1

我同意其他人在您的问题最有可能是以下之一：

您尚未正确通过回购通道。请检查此方法的父方法。
回购并不总是一个数组。在将数据分配给此变量之前，请看你如何初始化它。您可以将其初始设置为 let repos = [];将其设置为空阵列，然后获取任何数据。

另外，如果你是新的反应，与PropTypes明确地走了，他们是一个生命的救星，并会帮助您捕捉这类问题上的元件安装。

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

来源

2017-07-26 16:45:42

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

回答

相关问题