Question

我有一个假设的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块下的所有拼盘。我不确定如何为每个platter仅输出相应的dish。

Answer 1

您正在迭代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>)
}

Answer 2

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

const json = {
	"main": [{
		"dish": "steak",
		"side": [{
			"platter": "yogurt"
		}, {
			"platter": "popcorn"
		}]
	}, {
		"dish": "fish",
		"side": [{
			"platter": "salad"
		}]
	}]
}

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>

Answer 3

也许你没有在map函数中返回值？

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

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

reactjs使用json数据运行循环

3 个答案: