javascript - 如何在 Reactjs 中循环返回复杂的 JSON？

Question

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

我的完整代码非常复杂并且与问题无关。但请引用这个 fiddle :Full Code 。这将在本地服务器上工作。

相关代码:

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 keypair 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° 为数组中的每个子项提供一个 key 。

2°包裹你的<tr> <tbody> 内的标签。 <tr>不能显示为 <table> 的子项

jsfiddle