Question

所以我环顾四周，还没有真正找到解决方案。我想通过网络请求从检索到的数据集中通过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")
);

我认为我已经非常接近，绕过所有错误，但我最后还是留下了这个错误：TypeError: Cannot read property 'readMode' of undefined at eval

Answer 1

由于您在map参数中使用了普通的JavaScript函数，因此您正在为该函数创建新的上下文。因此，this值不是指您的类，而是指该函数的上下文。两种解决方案是：

1）将this绑定到现有的map函数：(function(item){ //logic}).bind(this)

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

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

Answer 2

除了@ 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")
);

Answer 3

我认为你不需要绑定任何东西。您可以在组件外声明您的功能，因为您不需要'this'：

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

然后你可以使用：

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

ReactJS通过地图迭代渲染多个UI组件

3 个答案: