0

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

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

其次，现在我可以通过点击功能运行它，我还想通过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/

4

1 回答 1

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函数并使用桃子函数来更新状态。

renderResults我向下移动到函数中的函数render。没必要，但帮我调试。

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

于 2016-08-02T17:51:51.753 回答