在reactjs中循环json对象数组[重复]答案

【问题标题】：looping the array of json object in reactjs [duplicate]在reactjs中循环json对象数组[重复]
【发布时间】：2018-04-26 02:50:07
【问题描述】：

我是 reactjs 的新手。我在显示结果时遇到问题。这是我的代码：

constructor (props) {
      super(props);
       this.state = {
         selectValue: '',
         yearsValue:'',
         months:''
       }
     this.setDataGroup = this.setDataGroup.bind(this);
   }

setDataGroup(e){
    var selectedType = e.target.value;
    if(selectedType == "quertly"){
       var quertlyData = [{
        data:"Jan-March",
        value:"1"
      },
      {
        data:"Apr-Jun",
        value:"2"
      },
      {
        data:"Jul-Sept",
        value:"3"
      },
      {
        data:"Oct-Dec",
        value:"4"
      }];
       this.setState({yearsValue:quertlyData});

我正在显示如下数据：

 render() {
 const data = JSON.stringify(this.state.yearsValue) || []
                  <div>
    {data.map((data, index) => {data})}
  </div>
}

我的 json 看起来像：

[{"data":"Jan-March","value":"1"},{"data":"Apr-Jun","value":"2"},{"data":"七月-九月","值":"3"},{"数据":"十月-十二月","值":"4"}]

得到错误 .map is not function

【问题讨论】：

为什么要字符串化？数据已经是一个数组，我假设您不想将其作为字符串获取。你的渲染方法也是静音的，你对映射函数有什么期望，因为箭头函数将为所有元素返回未定义
yearsValue 是string。 JSON.stringify 不会把它变成一个数组。

标签： reactjs

【解决方案1】：

yearsValue 是一个字符串，因此使用 JSON.stringify 对您没有帮助。

另外，render 方法必须返回一些东西：

constructor (props) {
  super(props);
  this.state = {
    selectValue: '',
    yearsValue: [],
    months:''
  }

  this.setDataGroup = this.setDataGroup.bind(this);
}
... 
render() {
  const { yearsValue } = this.state

  return (
    <div>
      {yearsValue.map((item, index) =>
        <div key={index}>{item.data}:{item.value}</div>
      )}
    </div>
  }
}

【讨论】：

yearsValue 是一个数组，如果它是一个字符串JSON.parse 会很有帮助
因此最好使用正确的类型而不是在每次渲染时尝试parse。就性能而言，这是一个糟糕的模式。
是的，我相信 OP 的困惑在于他的构造函数设置，以及他的 setDataGroup 函数中的 setState 方法
同意。这就是为什么我建议在构造函数中将yearsValue 初始化为数组。
@Karan 您是否也在构造函数中更改了它？它必须是一个数组，否则它总是会中断。

【解决方案2】：

您的数据格式正确。将yearsValue初始化为constructor中的数组类似

this.state = {
  yearsValue: []
}

然后您可以在render 中使用yearsValue 状态，如下所示

render() {
  return (
     <div>
       {this.state.yearsValue.map((d, index) => {
          return (
             <div key={index}>{d.data}</div>
          )
       })}
     </div>
  )
}

【讨论】：

大概yearsValue 可能是一个空字符串，它不会有map
@Icepickle - 是的，正确。我已经更新了答案..希望这可能有用。
好吧，几乎，渲染方法还没有返回任何东西；）
你很接近。刚刚错过了render的返回
谢谢@mersocarlin