Question

以下是tbody标记内的内容：

{this.props.listingData.map((listingData,index) => 
                                <tr key={index}>
                                    <td>{listingData.location_id}</td>
                                    <td>{listingData.location}</td>
                                    <td>{listingData.description}</td>
                                </tr>
                            )}

我收到map of undefined错误。

尝试记录this.props.listingData＆amp;它有效。

以下是我使用的示例map数据：

[{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}]

应该有效吗？

我的getDefaultProps：

getDefaultProps() {
        return {
          //value: 'default value' //called as this.props.value
          listingData: [{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}]
        };
    }

试过这个但仍然收到错误。

Answer 1

根据文档https://facebook.github.io/react/docs/reusable-components.html#default-prop-values，您必须定义创建组件时的默认道具：

var MyComponent = React.createClass({

  getDefaultProps: function() {
    return {
      listingData: []
    };
  },

  render: function () {
    //...
  }

});

或es2015

class MyComponent extends React.Component {

  render() {
    //...
  }

}

MyComponent.defaultProps = {
  listingData: []
}

具有静态属性支持

class MyComponent extends React.Component {

  static defaultProps = {
    listingData: []
  };

  render() {
    //...
  }

}

Answer 2

听起来您正在执行异步提取并将响应作为prop传递给此组件。这意味着第一次呈现组件时，它将是未定义的（尝试在render中放置一个断点并亲自查看）。

如您所见，您无法在map上致电undefined，因此如果您还没有数据，则需要返回其他内容。我个人更喜欢这些方面的东西：

if (!this.props.listingData) return null;

return this.props.listingData.map(listingData => // ...

显然还有其他方法可以写这个。或者，您可以提供默认道具。

请注意，location.id是唯一的，您应该将其用作key，而不是循环索引。

无法在React中列出州地图或道具地图

2 个答案: