React js映射函数错误，数据在ajax中设置为状态

Question

我作为数据得到的 ajax 响应如下：

{
 "totalCost": null,
  "listAmazonOutBean": [
    {
      "instanceId": "i-9820935f",
      "state": "stopped",
      "launchTime": "2016-02-08T14:46:18Z",
      "instanceType": "t2.micro",
      "placement": "us-west-2a",
      "listTags": [
        {
          "label": "Name",
          "value": "Micro RP test"
        },
        {
          "label": "Owner",
          "value": "JBU BBS"
        }
      ]
    },
    {
      "instanceId": "i-0b32c89f",
      "state": "stopped",
      "launchTime": "2016-07-22T21:06:38Z",
      "instanceType": "t1.micro",
      "placement": "us-west-2b",
      "listTags": [
        {
          "label": "aws:cloudformation:logical-id",
          "value": "LinuxEC2Instance"
        },
        {
          "label": "aws:cloudformation:stack-name",
          "value": "CodeDeploySampleStack-k0viff87wwolvvq2gldi"
        },
        {
          "label": "aws:cloudformation:stack-id",
          "value": "arn:aws:cloudformation:us-west-2:430671117617:stack/CodeDeploySampleStack-k0viff87wwolvvq2gldi/9c251e80-5021-11e6-a124-503f2a2cee82"
        },
        {
          "label": "Name",
          "value": "CodeDeployDemo"
        }
      ]
    },
    {
      "instanceId": "i-493dc7dd",
      "state": "stopped",
      "launchTime": "2016-07-22T21:06:38Z",
      "instanceType": "t1.micro",
      "placement": "us-west-2b",
      "listTags": [
        {
          "label": "Name",
          "value": "CodeDeployDemo"
        },
        {
          "label": "aws:cloudformation:logical-id",
          "value": "LinuxEC2Instance2"
        },
        {
          "label": "aws:cloudformation:stack-id",
          "value": "arn:aws:cloudformation:us-west-2:430671117617:stack/CodeDeploySampleStack-k0viff87wwolvvq2gldi/9c251e80-5021-11e6-a124-503f2a2cee82"
        },
        {
          "label": "aws:cloudformation:stack-name",
          "value": "CodeDeploySampleStack-k0viff87wwolvvq2gldi"
        }
      ]
    },
    {
      "instanceId": "i-3c33c9a8",
      "state": "stopped",
      "launchTime": "2016-07-22T21:06:39Z",
      "instanceType": "t1.micro",
      "placement": "us-west-2b",
      "listTags": [
        {
          "label": "aws:cloudformation:stack-id",
          "value": "arn:aws:cloudformation:us-west-2:430671117617:stack/CodeDeploySampleStack-k0viff87wwolvvq2gldi/9c251e80-5021-11e6-a124-503f2a2cee82"
        },
        {
          "label": "aws:cloudformation:logical-id",
          "value": "LinuxEC2Instance3"
        },
        {
          "label": "aws:cloudformation:stack-name",
          "value": "CodeDeploySampleStack-k0viff87wwolvvq2gldi"
        },
        {
          "label": "Name",
          "value": "CodeDeployDemo"
        }
      ]
    }
  ]
}

反应组件

var AwsInfo= React.createClass({

    getInitialState: function() {
                    return{

                        data: {},
                        response: undefined
    }},



    searchawsinfo : function(){
        var awsAccessKey = this.refs.awsAccessKey.value;
        var awsSecretKey = this.refs.awsSecretKey.value;
        var region = this.refs.region.value;
        var secure=JSON.parse(sessionStorage.getItem('globals'));
        securityToken=secure.currentUser.authToken;
        console.log(securityToken);
        console.log(region);
        var amazonInbean = {
            "awsAccessKeyId" : awsAccessKey,
            "awsSecretAccessKey" : awsSecretKey,
            "region" : region,
            "securityToken" :securityToken
        };
        console.log(amazonInbean);
        var self = this;
        self.setState({response: undefined});
        $.ajax({
                    type: "POST",
                        url: "http://localhost:9100/restfulws/rest/amazonmonitoring/getAWSInfo",
                        data: JSON.stringify(amazonInbean),
                        contentType: "application/json",
                        dataType: 'json',
                        success: function(data) { 

                                        console.log(data);
                                        self.setState({data: data});
                                        self.setState({response: data});
                                        console.log(self.state.data.listAmazonOutBean);
                                        console.log(self.state.response.listAmazonOutBean);
                                        console.log(self.state.response.totalCost);

                                }


                });


    },

    render : function(){
        var searchItems = this.props.response.map(function(search) {
                        return (<div>search.listAmazonOutBean
                                    </div>
                                );
                        }
                        );


    return(<div>{searchItems }</div> );

Answer 1

您可能遇到的错误是this.props.response is undefined。这是因为您没有将任何道具作为对组件的响应传递，而是在获取数据时设置了state response。

所以你需要映射 state 而不是 prop as

render : function(){
    var searchItems = this.state.response.map(function(search) {
                    return (<div>search.listAmazonOutBean
                                </div>
                            );
                    }
                    );


return(<div>{searchItems }</div> );

您还应该在对响应运行映射之前检查响应是否未定义

var AwsInfo= React.createClass({

getInitialState: function() {
                return{

                    data: {},
                    response: undefined
}},



searchawsinfo : function(){
    var awsAccessKey = this.refs.awsAccessKey.value;
    var awsSecretKey = this.refs.awsSecretKey.value;
    var region = this.refs.region.value;
    var secure=JSON.parse(sessionStorage.getItem('globals'));
    securityToken=secure.currentUser.authToken;
    console.log(securityToken);
    console.log(region);
    var amazonInbean = {
        "awsAccessKeyId" : awsAccessKey,
        "awsSecretAccessKey" : awsSecretKey,
        "region" : region,
        "securityToken" :securityToken
    };
    console.log(amazonInbean);
    var self = this;
    self.setState({response: undefined});
    $.ajax({
                type: "POST",
                    url: "http://localhost:9100/restfulws/rest/amazonmonitoring/getAWSInfo",
                    data: JSON.stringify(amazonInbean),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function(data) { 

                                    console.log(data);
                                    self.setState({data: data});
                                    self.setState({response: data});
                                    console.log(self.state.data.listAmazonOutBean);
                                    console.log(self.state.response.listAmazonOutBean);
                                    console.log(self.state.response.totalCost);

                            }


            });


},

render : function(){

    var searchItems = null;
    if(this.state.response != undefined) {
       searchItems = this.props.response.map(function(search) {
                    return (<div>search.listAmazonOutBean
                                </div>
                            );
                    }
                    );
    }


return(<div>{searchItems }</div> );