錯誤：未被捕獲（承諾）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不是函數

回答

相關問題