Использование Reactjs с Dexie.js?

Question

Я пытаюсь выяснить, как установить состояние реакции на значение базы данных. Я использую 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>); 
} 

fridge функция работает, так как он помещает соответствующий пункт в базе данных. Единственная часть кода, которая не работает, - this.setState({century:samba.race}). Это приводит к ошибкам Cannot read property 'setState' of undefined.

Как бы я переделал setState, чтобы взять данные из моего db?

Answer 1

Проблема не связана с Dexie.js (хорошая обложка indexDB btw). Вы вызываете this.setState() из обратного вызова, который вы передаете .then в качестве обработчика. Когда обратный вызов вызывается внутри контекста обетования this - undefined.

Чтобы решить, что вам нужно явно установить this обратного вызова, используя .bind или старый that = this, или просто использовать функцию стрелки (demo):

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