Object.mapObjectToArray 不是函数

Question

我的代码有很大问题，因为我不明白我在映射对象时做错了什么。我仍然收到消息 'object.mapobjecttoarray is not a function''

var AppNo = React.createClass({
render: function() {
    var dataNodes = Object.mapObjectToArray(this.props.data, function(no, id) {
        return (
            <div key={id}>{no.name}</div>
        )
    });
    return (
        <div>
            {dataNodes}
        </div>
    );
}
});
var App = React.createClass({
getInitialState: function() {
    return {
        data: {
            no: {
                name: 'text 1'
            },
            non: {
                name: 'text 2'
            }
        }
    }
},
render: function() {
    return (
        <div className="container-fluid">
            <AppNo data={this.state.data} />
        </div>
    );
}
});

ReactDOM.render (<App />,document.getElementById('app'));

谁能告诉我怎么了？

Answer 1

您正在尝试迭代 object 而不是 array 并且 objects 没有 map 方法。在您的 App 状态下创建数组，一切都应该没问题。

数据示例

data: [
    {
        id: '1',
        name: 'text 1'
    },
    {
        id: '2',
        name: 'text 2'
    }
]

用你的例子检查这支笔 - http://codepen.io/t1m0n/pen/EKpeve?editors=0010#

您的示例已修复

var AppNo = React.createClass({
    render: function() {
    var dataNodes = this.props.data.map(function(item) {
        return (
            <div key={item.id}>{item.name}</div>
        )
    });
    return (
        <div>
            {dataNodes}
        </div>
    );
}
});
var App = React.createClass({
getInitialState: function() {
    return {
        data: [
            {
                id: '1',
                name: 'text 1'
            },
            {
                id: '2',
                name: 'text 2'
            }
        ]
    }
},
render: function() {
    return (
        <div className="container-fluid">
            <AppNo data={this.state.data} />
        </div>
    );
}
});

ReactDOM.render(<App />,document.getElementById('app'));

Object.mapObjectToArray 不是函数

Object.mapObjectToArray is not a function

javascript

jsx

reactjs

数据示例

您的示例已修复