ループで反応しますか？

Question

Reactを使用して、この例ではDexie.jsを実装しています。しかし、私はこれが特に重要であるとは思わない。 Reactを使用してIndexDBデータベース内のオブジェクトのループを実行する方法を知りたいと思います。

以下のコードに示すように、daytaには私のデータベースが保存され、nameとageの値を持つfriendsが格納されます。私の関数carveitが実行されると、ユーザーが入力した内容が取り込まれ、その値が{this.state.etv}に配置されます。コードは機能します。

しかし、私はどのように{this.state.etv}すべてのエントリを表示するかわかりません。つまり、最新の追加だけが表示されます。私は何らかのループを実行して、map関数を使用しなければならないことを理解していますが、それについてはわかりません。

var React = require('react'); 

module.exports = React.createClass({ 
    getInitialState: function(){ 
     return { etv:'' }  
    }, 

    carveit:function(){ 
     var enteringtitle = document.getElementById('entertitle').value; 
     var enteringmessage = document.getElementById('enterentry').value;  


     var dayta = new Dexie('testcase'); 
     dayta.version(1).stores({ 
      friends:'name, age'  
     }); 


     dayta.open().catch(function(error){ 
     alert("Oh no son: " +error);  
     }); 

     dayta.friends.add({ 
      name: enteringtitle, 
      age: enteringmessage  
     });  

     dayta.friends.each((friend)=>{ 
      this.setState({etv: friend.name}); 
     });  

    },  

    functionrun:function(){ 
     return (<div> 
      <ul> 
       <li>{this.state.etv}</li> 
      </ul>   
      <p>Entry Title</p>  
      <input id="entertitle" type="text" className="form-control"/> 

      <p>Your Entry</p>  
      <textarea id="enterentry" className="form-control"></textarea> 


      <input id="entrytitle" type="submit" value="Publish" onClick={this.carveit} />   
     </div>); 
    },  

    render:function(){ 
     if (this.props.contentadd){ 
      return this.functionrun(); 
     } 
     else { 
      return null; 
     }  
    } 

}); 

Answer 1

ループを個別に実行してjsxを返すことができます。 jsxパーシャルの配列がサポートされているので、テンプレートの戻り値を使用できます。

render: function() { 
    var itemElements = this.state.items.map(function(item, i) { 
     return (
      <li>{item}</li> 
     ); 
    }); 

    return (
     <ul> 
      {itemElements} 
     </ul> 
    ); 
}