ReactJS通过映射迭代渲染多个UI组件

所以我环顾四周，还没有真正找到解决方案。我想通过React中的.map()函数渲染多个UI元素，通过网络请求获取数据集。我尽可能在一个简单的字符串中填充数据值，但似乎无法通过从单独的函数调用UI来完成。以下是我有：ReactJS通过映射迭代渲染多个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

来源

2017-02-10 SVY

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

1）结合this现有map功能：(function(item){ //logic}).bind(this)

2）更好的选择假设你可以使用ES6，使用箭头功能。箭功能继承父的上下文，让您自动解决问题：

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

来源

2017-02-10 19:14:03 ZekeDroid

'this.state.inventory.map（这一点。 readMode）'也可以 – Joe

加成@ 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") 
);

来源

2017-02-10 19:20:21

我不认为你需要绑定任何东西。你可以只声明您的功能部件之外，因为你并不需要“这个”：

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

那么你可以使用：

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

来源

2017-02-10 19:38:53 programmingheadaches

ReactJS通过映射迭代渲染多个UI组件

回答

相关问题