Question

我是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看起来像：

[{ “数据”： “一月至三月”， “值”： “1”}，{ “数据”： “四月至六月”， “值”： “2”}，{ “数据”：”七月至九月”， “值”： “3”}，{ “数据”： “十月至十二月”， “值”： “4”}]

获取错误.map不是函数

Answer 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>
  }
}

Answer 2

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

this.state = {
  yearsValue: []
}

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

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

在reactjs

2 个答案: