React 在组件挂载上查询数据库？

Question

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

首先，查找我的数据库 ID 似乎有问题。例如，当我在我的桃子功能下运行 console.log(amigo.id) 时，它 returns 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，但我想我已经完成了您的要求。

已更新 Fiddle：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函数。没必要，但帮我调试了。

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

React 在组件挂载上查询数据库？

React query a db on component mount?

javascript

reactjs

dexie