reactjs与JSON数据循环运行

我有一个假设的JSON文件读取，像这样：reactjs与JSON数据循环运行

{ 
    "main": [ 
    { 
     "dish": "steak", 
     "side": [ 
     {"platter": "yogurt"}, 
     {"platter": "popcorn"} 
     ] 
    }, 
    { 
     "dish": "fish", 
     "side": [ 
     {"platter": "salad"} 
     ] 
    } 
    ] 
}

我目前有了解如何在这个数据与ReactJS运行一个for循环问题

。

getInitialState:function(){ 
    return { 
      fulldata: { 
      main:[ 
       { 
       side:[] 
       } 
      ] 
      } 
     } 
}, 

componentDidMount:function(){ 
    var self = this; 
    $.getJSON('https://yooarel.fakewebsite', function(resultes){ 
    self.setState({fulldata: resultes}); 
    }); 
}, 

rundmc:function(){ 
    return (<ul> 
     { 
     this.state.fulldata.main.map(function(m, i){ 
      return m.side.map(function(make, o){ 
      return <li key={o}>{make.platter}</li> 
      }) 
     }) 
     } 
    </ul>) 
}, 
render:function(){ 
    var self = this; 
    return (<div> 
    <ul> 
     {this.state.fulldata.main.map(function(m, i){ 
     <li key={i}> 
      <span>{m.dish}</span> 
      {self.rundmc()} 
     </li> 
     })} 
    </ul> 
    </div>) 
}

我试图把一个<ul li>块，列出了不同类型的dishes我：我的代码的其余部分安排如下。然后，对于我的li区块下的每道菜，我也尝试放置一个ul li区块，列出每道菜下不同的platter。这是我正在尝试在我的rundmc()函数下完成的。

我的代码显示了我的ul ul li块下的所有盘片。我不知道如何为每个dish只输出适当的platter。

来源

2016-11-25 abrahamlinkedin

你迭代所有数据rundmc功能以及，你必须通过当前的菜作为参数和迭代只有侧阵列

rundmc:function(dish){ 
    return (<ul> 
     { 
     dish.side.map(function(make, o){ 
      return <li key={o}>{make.platter}</li> 
     }) 
     } 
    </ul>) 
}, 
render:function(){ 
    var self = this; 
    return (<div> 
    <ul> 
     {this.state.fulldata.main.map(function(m, i){ 
     <li key={i}> 
      <span>{m.dish}</span> 
      {self.rundmc(m)} 
     </li> 
     })} 
    </ul> 
    </div>) 
}

来源

2016-11-25 23:37:36 diedu

也许你没有返回地图函数中的值？

{this.state.fulldata.main.map(function(m, i){ 
    return (
    <li key={i}> 
     <span>{m.dish}</span> 
     {self.rundmc()} 
    </li> 
) 
})}

编辑：没有看到rundmc方法。正如diedu所示，您再次映射相同的数组，而不是将想要映射的实际值传递给内部。

来源

2016-11-25 23:30:57

我建议不使用的方法为这个，因为嵌套地图非常简单，每次渲染时也不需要React为每个孩子创建新的函数。这里有一个例子：

const json = { 
 
\t "main": [{ 
 
\t \t "dish": "steak", 
 
\t \t "side": [{ 
 
\t \t \t "platter": "yogurt" 
 
\t \t }, { 
 
\t \t \t "platter": "popcorn" 
 
\t \t }] 
 
\t }, { 
 
\t \t "dish": "fish", 
 
\t \t "side": [{ 
 
\t \t \t "platter": "salad" 
 
\t \t }] 
 
\t }] 
 
} 
 

 
class Example extends React.Component { 
 
    
 
    render() { 
 
    return(
 
     <ul>{json.main.map((main, i) => (
 
     <li key={i}> 
 
      {main.dish} 
 
      <ul>{main.side.map(side => <li>{side.platter}</li>)}</ul> 
 
     </li>))} 
 
     </ul> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>

来源

2016-11-25 23:39:11

reactjs与JSON数据循环运行

回答

相关问题