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數據循環運行

回答

相關問題