如何映射我从ajax React js获得的数据？

Question

我是新来对付js的。如何通过我得到的数据映射，从ajax.I JSON响应知道我做错了一些地方但是where.This错误我得到

Uncaught TypeError: this.state.data.map is not a function

这个我不知道是我的代码

/** 
* Created by arfo on 6/26/2016. 
*/ 
var React =require('react'); 
var api = require('../utils'); 


var Bulkmail = React.createClass({ 
    getInitialState:function() { 
     return{ 
      default:10, 
      data:'', 
      color:'#58FA58' 

     } 
    }, 
    componentDidMount:function() { 
     api.getemail(this.state.default).then(function (response) { 
      this.setState({ 
       data:response 

      }) 
     }.bind(this)) 
    }, 
    onSubmit:function (e) { 
     e.preventDefault(); 
     console.log(this.refs.text.value.trim()); 


    }, 

    onChange:function (e) { 
    e.preventDefault(); 
     //console.log(this.refs.text.value.trim()) 
     var data = this.refs.text.value.trim(); 
     if(isNaN(data)){ 
      this.setState({ 
       color:'#FE2E2E' 
      }) 
     }else{ 
      this.setState({ 
       color:'#58FA58' 
      }) 
     } 
    }, 
    render:function() { 
     console.log(this.state.data); 
     var results = this.state.data; 
     return(
      <div className="bodybox"> 
       <div className="box"> 
        <div className="upc"> 
         <p>Generate Bulk Email</p> 
         <form onSubmit={this.onSubmit}> 
         <input onChange={this.onChange} type="text" style={{border:'1px solid '+this.state.color}} ref="text" defaultValue={this.state.default} placeholder="Enter Number"/> 
         <button>Get Data</button> 
         </form> 
         <div className="result"> 
          <ul> 
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
           {this.state.data.map(function (data) { 
            return <li>data.email</li> 
           })} 
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

          </ul> 
         </div> 

        </div> 
        <div className="tdown"> 

         <p>Json Format</p> 


         <textarea defaultValue={"json"} /> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
}); 

module.exports = Bulkmail ; 

Answer 1

集数据：[]在

getInitialState:function() { 
     return{ 
      default:10, 
      data:[], 
      color:'#58FA58' 

     } 
    }, 

并检查

componentDidMount:function() { 
    api.getemail(this.state.default).then(function (response) { 

    console.log('CHECK',response) // <---------------- 

     this.setState({ 
      data:response 

     }) 
    }.bind(this)) 
}, 

Answer 2

您的状态数据未定义为数组。更正为：

getInitialState:function() { 

    return{ 
     default:10, 
     data: [], 
     color:'#58FA58' 

    } 
} 

Answer 3

Add 

getInitialState: function() { 
    return{ 
     default:10, 
     data:[], 
     color:'#58FA58' 

    } 
}