Javascript 从数据库中返回JS循环

我想了解如何使用ReactJS从数据库循环遍历数组。对于这个特定的实例，我使用一个名为的IndexDB包装器

我的代码如下。我想让它做的是填写

{this.state.results.name}

，在填写完这两个框并单击submit按钮后，使用我添加到其中的全部内容数组

按原样，代码将值添加到数据库中。我只是无法理解如何使用React来查询它们

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

zanzibar:function(){
var resname = document.getElementById('inputname').value;
var resage = document.getElementById('inputage').value;
var datastoring = new Dexie('MySpace');
datastoring.version(1).stores({
friends: 'name, age'
});

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

datastoring.friends.each((friend)=>{
this.setState({results:[{name:resname, age:resage}] });
}); 

datastoring.friends.add({
name: resname, 
age: resage
});
},
render:function(){
return (<div>
<input type="text" id="inputname" />
<input type="text" id="inputage" />
<input type="submit" value="Shipping And Handling" onClick={this.zanzibar}/>
<p>{this.state.results.name}</p>
</div>);}

});

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

var SisterChristian=React.createClass({
getInitialState:函数（）{
返回{results:[{name:''，age:'}]}
},
桑给巴尔：函数（）{
var resname=document.getElementById（'inputname'）。值；
var resage=document.getElementById（'inputage'）.value；
var datastoring=new-Dexie（'MySpace'）；
datastoring.version（1）.stores({
朋友：“姓名、年龄”
});
datastoring.open（）.catch（函数（err）{
警惕（“哦，不，儿子：”+呃）；
});
datastoring.friends.each（（friends）=>{
this.setState（{results:[{name:resname，age:resage}]}）；
}); 
datastoring.friends.add({
姓名:resname,，
年龄：转售
});
},
render:function（）{
返回(
{this.state.results.name}

);}
});
ReactDOM.render（，document.getElementById（'bacon'））；

您也可以在CodePen上看到它，这将使它更容易看到。

---

我想你把什么是数组和什么是单个对象搞混了。这里有一些一般的提示

• 缩进
• 要在数组上循环并输出DOM，请使用数组方法

  map

  ，并为数组中的项返回所需的DOM。有一个单独的函数很方便（但不是必需的）——这使DOM树位于

  render（）

  中，易于阅读
• 在您的示例中，您将数据保存到state和Dexie，因此必须将新数据保存到state和Dexie。当应用程序变得更复杂时，您应该将数据保存到一个中央存储，并将该存储作为道具传递到组件中
• 如果您键入的代码在DOM中查找某些内容并返回它（例如，

  querySelector

  ），您可能想错了方向。这是脆弱的（你必须有一个ID，并且知道该ID在整个应用程序中是唯一的），这也是

  ref

  s的用途

结果如下：

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

  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: 'name, age'
    });

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

    // you can't do this, you need to add a new item to the results array, not reset the array
    // datastoring.friends.each((friend)=>{
    //   this.setState({results:[{name:resname, age:resage}] });
    // }); 

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

    datastoring.friends.add(newFriend);

    // this is how you update the state of the object with new data
    var newResults = this.state.results.slice(); // clone the array
    newResults.push(newFriend);
    this.setState({results: newResults});
  },

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

  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}/>
        <p>{this.state.results.name}</p>
        <p>{this.renderResults(this.state.results)}</p>
      </div>
    );
  }

});

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

var SisterChristian=React.createClass({
getInitialState:函数（）{
返回{结果：[
{
姓名：'Jason'，
年龄：'25'
},
{
姓名：'Bob'，
年龄:‘29’
}
]}
},
桑给巴尔：函数（）{
//不要使用document.querySelector（），您应该能够像这样访问任何DOM元素
var resname=this.inputNameEl.value；
var resage=this.inputagel.value；
var datastoring=new-Dexie（'MySpace'）；
datastoring.version（1）.stores({
朋友：“姓名、年龄”
});
datastoring.open（）.catch（函数（err）{
警惕（“哦，不，儿子：”+呃）；
});
//无法执行此操作，您需要向结果数组添加新项，而不是重置数组
//datastoring.friends.each（（friends）=>{
//this.setState（{results:[{name:resname，age:resage}]}）；
// }); 
var newFriend={
姓名:resname,，
年龄：转售
};
datastoring.friends.add（newfriends）；
//这就是使用新数据更新对象状态的方式
var newResults=this.state.results.slice（）；//克隆数组
newResults.push（newFriend）；
this.setState（{results:newResults}）；
},
renderResults:函数（结果）{
return results.map（result=>{//这是从对象数组创建DOM元素的方法
返回
{result.name}，{result.age}
；
});
},
render:function（）{
返回(
this.inputNameEl=el}/>
this.InputGeel=el}/>
{this.state.results.name}

{this.renderResults（this.state.results）}

);
}
});
ReactDOM.render（，document.getElementById（'bacon'））；

谢谢！我将

键

值更改为ID，以消除重复键的问题。但是，我还有一个问题，那就是

不能是

错误的后代。我不知道该归因于什么。我猜你是在渲染li或其他东西，这是关于HTML结构的错误，而不是特定于react。是的，我修复了它。将p标签更改为相应的ul li。现在，我正试图理解关键道具问题，它显然再次出现。为了添加新的

id

，我将数据库更改为

friends:++id、name、age

。如何重新组织

var newFriend

以允许使用新id？我问，因为我仍在努力解决

每个孩子都应该有一个唯一的钥匙道具
问题。我建议在添加新物品时，或者如果你这样做
++ID
，德克西是否可以告诉你它给了一些新物品什么ID。