Javascript ReactJS通过映射迭代呈现多个UI组件

所以我环顾四周，还没有找到解决这个问题的方法。我想通过React中的

.map（）

函数通过网络请求从检索到的数据集呈现多个UI元素。我已经能够在一个简单的字符串中填充数据值，但是我似乎无法通过从单独的函数调用UI来完成。以下是我所拥有的：

readMode: function(item) {
    return (
            <div>
                <div className="itemNo">item.itemNo</div>
                <div className="itemRef">item.itemRef</div>
                <div className="itemColor">item.itemColor</div>                     
            </div>
    )
},

render: function() {
    return (
        <div>
            {this.state.inventory.map(function(item){
                return this.readMode(item);
            })}
        </div>
    )       
}

ReactDOM.render(
    <Inventory />, 
   document.getElementById("container")
);

readMode:函数（项）{
返回(
item.itemNo
item.itemRef
item.itemColor
)
},
render:function（）{
返回(
{this.state.inventory.map（函数（项））{
返回此.readMode（项目）；
})}
)       
}
ReactDOM.render(
, 
document.getElementById（“容器”）
);

---

我想我真的很接近了，绕过了所有的错误，但最后我只剩下一个：

TypeError:cannotread属性'readMode'的undefined at eval

因为在

map

参数中使用了一个普通的JavaScript函数，所以您正在为该函数创建一个新的上下文。因此，

this

值不是指类，而是指该函数的上下文。两种解决方案是：

1） 将

this

绑定到现有的

map

函数：

（函数（项）{//logic}）。绑定（this）

2） 更好的选择是假设您可以使用ES6，使用箭头函数。箭头函数从父函数继承上下文，因此可以自动解决问题：

this.state.inventory.map(item => this.readMode(item))

---

除了@ZekeDroid的答案之外，您还可以用以下更简单的方式编写：

readMode: function() {
    return this.state.inventory.map((item, i)=>{
        return (
            <div key={i}>
                <div className="itemNo">{item.itemNo}</div>
                <div className="itemRef">{item.itemRef}</div>
                <div className="itemColor">{item.itemColor}</div>                     
            </div>
        )
    })

},

render: function() {
    return (
        <div>            
            {this.readMode()}           
        </div>
    )       
}

ReactDOM.render(
    <Inventory />, 
   document.getElementById("container")
); 

readMode:function（）{
返回此.state.inventory.map（（项目，i）=>{
返回(
{item.itemNo}
{item.itemRef}
{item.itemColor}
)
})
},
render:function（）{
返回(
{this.readMode（）}
)       
}
ReactDOM.render(
, 
document.getElementById（“容器”）
); 

我认为您不需要绑定任何东西。您可以在组件外部声明函数，因为您不需要“this”：

const readMore = (item) => { return <div>{item.name}</div>; } 

this.state.inventory.map(() => {return readMore(item); });