在组件安装上反应查询数据库？

Question

对于这个例子，我将 React 与 Dexie.js 一起使用。我有一个代码 zanzibar，它在运行时会将我的 IndexDB 中的对象列表添加到页面中。我有两件事要补充。

首先，查找我的数据库的 ID 似乎存在问题。例如，当我在我的 peaches 函数下运行 console.log(amigo.id) 时，它会返回 undefined。我的 indexDB 面板上也没有看到 ID。

其次，现在我可以通过点击函数运行它，我还想通过componentDidMount 加载我的 indexDB 数据。这样做的目的是在页面加载时将我的 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，但我想我设法完成了您的要求。

更新小提琴：https://jsfiddle.net/jgwhxuam/2/

首先，我将此块移到顶部，这样您就不会重复自己（“DRY”）。

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

然后，我将您的 getInitialState 结果调整为一个空数组，这样它就不会在 dom 上呈现一些空格（带有项目符号等）。

我没有使用控制台在peaches 函数中记录结果，而是使用它来获取您存储的 indexedDB 数据并将其输入到状态中。我添加了.then() 来完成此操作。当componentDidMount() 运行时，它应该呈现列表作为结果。

zanzibar 函数我只是稍微合并了一下，使用 peaches 函数来更新状态。

renderResults 函数我移到了render 函数中。没必要，但帮我调试了。

如果您有任何问题，我可以修改此答案。祝你好运！