javascript - ReactJS 循环遍历集合

Question

我一直在为这个错误而苦苦挣扎:

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;

我传递给 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>
    );
  }
}

Answer 1

我猜您的 resultSet 在某些时候为 null 或未定义。要增加一些健壮性和清晰度，您可以做的一件事是将 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;

这会做几件事。当数据类型错误或数据中的项目形状错误时给你一些警告(它们应该是具有名称属性的对象)。另外...如果数据未定义，它会给你一个空数组。这应该可以阐明您的问题。