Реагировать запрос db на монтирование компонента?

Question

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

Во-первых, существует проблема с поиском идентификатора моей базы данных. Например, когда я запускаю console.log(amigo.id) под моей функцией персиков, он возвращает undefined. Я также не вижу ID на моей панели indexDB.

Во-вторых, теперь, когда я могу запустить это из функции щелчка, я также хотел бы загрузить мои данные indexDB через componentDidMount. Целью этого было бы загрузить все на моем indexDB на мою страницу при загрузке страницы. Моя функция peaches должна сделать это, хотя я не совсем уверен, как это сделать.

var SisterChristian = React.createClass({ 
    getInitialState:function(){ 
    return { 
    results:[{id:'', name:'',age:''}] 
    } 
    }, 

peaches:function(){ 
    var datastoring = new Dexie('MySpace'); 
    datastoring.version(1).stores({ 
     friends: '++id, name, age' 
    }); 

    datastoring.open().catch(function(err){ 
     alert('Oh no son:' +err); 
    }); 

datastoring.friends.each((amigo)=>{ 
console.log(amigo.id+", "+amigo.name); 

}); 

}, 

componentDidMount:function(){ 
return this.peaches(); 
}, 

    zanzibar:function(){ 
    // don't use document.querySelector(), you should be able to access any of your DOM elements like this 
    var resname = this.inputNameEl.value; 
    var resage = this.inputAgeEl.value; 
    var datastoring = new Dexie('MySpace'); 
    datastoring.version(1).stores({ 
     friends: '++id, name, age' 
    }); 

    datastoring.open().catch(function(err){ 
     alert('Oh no son:' +err); 
    }); 

    var newFriend = { 
     name: resname, 
     age: resage 
    }; 

    datastoring.friends.add(newFriend).then((id) => { 
     // this is how you update the state of the object with new data 
     var newResults = this.state.results.concat([Object.assign({}, newFriend, { id })]); 
      this.setState({results: newResults}); 
    }); 
    }, 

    renderResults:function(results) { 
    return results.map(result => { // this is how you create DOM elements from an array of objects 
     return <li key={result.id}>{result.name}, {result.age}</li>; 
    }); 
    }, 

    render:function(){ 
    return (
     <div> 
     <input type="text" id="inputname" ref={el => this.inputNameEl = el} /> 
     <input type="text" id="inputage" ref={el => this.inputAgeEl = el} /> 
     <input type="submit" value="Shipping And Handling" onClick={this.zanzibar}/> 
     <ul>{this.renderResults(this.state.results)}</ul> 
     </div> 
    ); 
    } 

}); 

ReactDOM.render(<SisterChristian/>, document.getElementById('bacon')); 

В JSFiddle https://jsfiddle.net/jgwhxuam/

Answer 1

Я не знаком с Dexie.js, но я думаю, что мне удалось получить то, что вы просите свершившимся.

Обновлено Fiddle: https://jsfiddle.net/jgwhxuam/2/

Во-первых, я переехал этот блок в верхней части так, что вы не повторять себя («СУХОЙ»).

var datastoring = new Dexie('MySpace'); 
datastoring.version(1).stores({friends: '++id, name, age'}); 
datastoring.open().catch(function(err){ alert('Oh no son:' +err) });  

Затем я подправил свои getInitialState результатов в пустой массив, так что он не делает некоторые пробела на йоте (с пулями, и т.д.).

Вместо того, чтобы вести ведение журнала в результате функции peaches, я использовал ее для хранения сохраненных индексированных данных DB и ввода их в состояние. Я добавил .then(), чтобы выполнить это. Когда запускается componentDidMount(), он должен отобразить список в результате.

Функция zanzibar Я немного упростил и использую функцию персиков для обновления состояния.

Функция renderResults Я перешел в функцию render. Не нужно, но помог мне отладить.

Если у вас есть какие-либо вопросы, я могу пересмотреть этот ответ. Удачи!