Question

我一直在犯这个错误：

未捕获的TypeError：data.map不是函数

这是我的代码：

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的是Set＆lt;＆gt;这些：

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;

这会做几件事。当数据类型错误时，或者如果数据中的项目形状错误（它们应该是具有name属性的对象），请给出一些警告。另外......如果数据未定义，它将为您提供一个空数组。这应该可以解释你的问题。

ReactJS循环遍历集合

1 个答案: