はJSマップ機能のエラーが反応して、データは次のように私はデータとして取得するAjaxのレスポンスがあるAJAX

Question

内の状態に設定されたばかりされています

{ 
"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にデータをフェッチするように設定しているためです。

だからではなく、小道具の状態の上にマッピングする必要がありますまた、あなたはそれ

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>); 

上のマップを実行する前に、それは未定義でないことを確認するために応答のチェックを提供する必要があります

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


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

として