ReactJS循環通過設置

我一直是這樣的錯誤strugling：ReactJS循環通過設置

Uncaught TypeError: data.map is not a function

這裏是我的代碼：

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

const Foo = (props) => { 
    const data = props.data; 

    return (
     <div> 
      { 
       !data ? null : (
        data.map((item, index) => 
         <a>{item.name}</a>) 
       ) 
      } 
     </div> 
    ) 
}; 

export default foo;

我傳遞給富是其中一集<>：

public class Bar extends Dto { 
    public BigDecimal id; 
    public String name; 
}

任何想法可能是這種情況？

編輯：

import React, { Component } from 'react'; 

class AnotherFoo extends Component { 

    render() { 
    const data = this.props; 

    return (
     <div> 
     <Foo data={data.resultSet} /> 
     </div> 
    ); 
    } 
}

來源

2017-08-24 Simas.B

'！data？ null :('你爲什麼否定'data'？你也使用['map']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map） –

'data'是一個數組嗎？ – jmargolisvt

@NathanP。case有時候它是空的，我得到錯誤，我不能.map，這些行中的東西。 –

我猜你的ResultSet是空或在某個時刻不確定的。有一兩件事可以做，以添加一些魯棒性和清晰度是propTypes和defaultProps添加到您的組件

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

const Foo = (props) => { 
    const data = props.data; 

    return (
     <div> 
      { 
       !data ? null : (
        data.map((item, index) => 
         <a>{item.name}</a>) 
       ) 
      } 
     </div> 
    ); 
}; 

Foo.propTypes = { 
    data: PropTypes.arrayOf(PropTypes.shape({ 
    name: PropTypes.string 
    }) 
}; 

Foo.defaultProps = { 
    data: [] 
}; 

export default Foo;

這將做幾件事情。當數據是錯誤的類型時，或者數據中的項目是錯誤的形狀（它們應該是具有名稱屬性的對象）時，給你一些警告。另外...它會給你一個空數組，如果數據未定義。這應該對你的問題有所瞭解。

來源

2017-08-24 15:21:43 bluetoft

ReactJS循環通過設置

回答

相關問題