Петля с реактивом?

Question

Используя React, я применяю Dexie.js для этого примера. Однако я не считаю это особенно важным. Я хотел бы знать, как выполнить цикл объектов в моей базе данных IndexDB с помощью React.

Как показано в моем коде ниже, dayta имеет свою базу данных, и сохраняет friends с 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> 
    ); 
}