Verwenden von Reactjs mit Dexie.js?

Question

Ich versuche herauszufinden, wie man einen Reaktionsstatus auf den Wert der Datenbank setzt. Ich benutze Dexie.js.

var Duck = React.createClass({ 
getInitialState:function(){ 
return { century:'' } 
}, 

fridge:function(){ 

var db = new Dexie('homie'); 
db.version(1).stores({ 
friends:'name, race'}); 

db.open().catch(function(){ 
alert("Open failed: "); 
}); 

db.friends.put({name: 'Johnny', race:'hispanic'}).then(function(){ 
return db.friends.get('Johnny'); 
}).then(function(samba){ 
console.log(samba.race); 
this.setState({century: samba.race}); 
}); 
}, 

render:function(){ 
return (<div> 
<input type="submit" value="Submeet" onClick={this.fridge} /> 
<p>{this.state.century}</p> 
</div>); 
} 

Die fridge Funktion arbeitet, wie es das entsprechende Element in der Datenbank platziert. Der einzige Teil des Codes, der nicht funktioniert, ist this.setState({century:samba.race}). Dies führt zu Fehlern von Cannot read property 'setState' of undefined.

Wie würde ich die setState re-tun, um die Daten von meinem db aufzunehmen?

Answer 1

Das Problem hat nichts mit Dexie.js zu tun (nice indexDB wrapper btw). Sie rufen this.setState() von einem Rückruf auf, den Sie als Handler an .then übergeben. Wenn der Rückruf innerhalb des Promenzusammenhangs aufgerufen wird, ist thisundefined.

lösen, dass man sich ausdrücklich this des Rückrufs festlegen muß, .bind oder die alten that = this verwenden, oder einfach nur einen Pfeil Funktion (demo) verwenden:

.then((samba) => { 
    console.log(samba.race); 
    this.setState({ 
     century: samba.race 
    }); 
    });