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循环通过设置

回答

相关问题