如何在React.js中循环返回复杂的JSON？

Question

我在构建一个简单的应用程序时正在学习Reactjs。 我知道这是非常基本的，并且对于stackoverflow上的同一问题有很多答案。 但由于范围可变，我无法实现这些功能。 如果有人能够帮助我，我将不胜感激。

我的完整代码非常复杂，与问题无关。 但是请参考以下小提琴： 完整代码 。 这将在本地服务器上工作。

相关代码：

var localStore = {};
// localStore = {"f":{"symbol":"f","quantity":10,"pricePaid":136},"jnj":{"symbol":"jnj","quantity":30,"pricePaid":146}};

var SearchStock = React.createClass({
...
render: function() {
...
return ( // I tried map function in other ways too like [localstore].map and then get its values in similar way as i am getting below.
{/*localStore.map(function (l, i) {
  return <tr>
           <td>{Object.keys(l)[i].symbol}</td>
           <td>{Object.keys(l)[i].quantity}</td>
           <td>{Object.keys(l)[i].pricePaid}</td>
           <td>{Object.keys(l)[i].symbol}</td>
         </tr>
})*/}
{/*for(var x in localStorage){ // This is what i really want to do.
  return <tr>
           <td>{x.symbol}</td>
           <td>{x.quantity}</td>
           <td>{x.pricePaid}</td>
           <td>anything</td>
         </tr>
}*/}
{stocks.map(function(l) { // this works.
   console.log("in return stocks",JSON.stringify(stocks));
   return <tr>
            <td>{l[Object.keys(l)[0]]["name"]}</td>
            <td>{this.state.quantity}</td>
            <td>{this.state.pricePaid}</td>
            <td>{<input type="button" value="View Stock"/>}</td>
          </tr>
}, this)}

我不知道为什么map函数不能在localStore中用作值，而stocks却是类似的： stocks = [{only one key pair of localStore}] 。 我将不胜感激，为此我可以提供任何帮助或指导。

Answer 1

您应该使用Object.keys来获取带有localStore键的数组，并对其进行迭代以显示数据。

{Object.keys(localStore).map(function (key) {
          return <tr key={key}>
              <td>{localStore[key].symbol}</td>
              <td>{localStore[key].quantity}</td>
              <td>{localStore[key].pricePaid}</td>
              <td>{localStore[key].symbol}</td>
          </tr>
 })}

您错过了其他东西，例如

1º为阵列中的每个孩子提供一个钥匙。

2º将<tr>标记包装在<tbody> 。 <tr>不能作为<table>的子代出现

jsfiddle