루프가있는?

Question

React를 사용하여이 예제에서는 Dexie.js을 구현하고 있습니다. 그러나, 나는 이것이 특히 중요하다고 생각하지 않습니다. React를 사용하여 IndexDB 데이터베이스에서 루프를 실행하는 방법을 알고 싶습니다.

아래 코드에서 볼 수 있듯이 dayta에는 데이터베이스가 저장되어 있으며 에는 name 및 age 값이 저장됩니다. 내 기능 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> 
    ); 
}