获取我的箭头函数输出并在React中的渲染组件中以表格格式显示它

Question

用例

我试图从我的箭头函数中获取数据，并在单击按钮时以表格格式显示。

这是我的反应组件

import React, { Component } from "react";

export default class DisplayStats extends Component {

 handleClick = () => {
var params = {
    EndTime: 1536172199,
    MetricDataQueries: [ 
        {
            Id: 'm17',
            MetricStat: {
              Metric: { 
                Dimensions: [
                  {
                    Name: 'BucketName', 
                    Value: BName
                  },
                ],
                MetricName: 'BucketSizeBytes',
                Namespace: 'AWS/S3'
              },
              Period: 86400, 
              Stat: 'Sum',
              Unit: 'Bytes'
            },
            ReturnData: true
          },
    {
            Id: 'm18',
            MetricStat: {
              Metric: { 
                Dimensions: [
                  {
                    Name: 'BucketName', 
                    Value: BName
                  },
                ],
                MetricName: 'BucketSizeBytes',
                Namespace: 'AWS/S3'
              },
              Period: 86400, 
              Stat: 'Sum',
              Unit: 'Bytes'
            },
            ReturnData: true
          },
        ],
      };
      cloudwatch.getMetricData(params, function(err, data) {
        if (err) {
            console.log(err, err.stack);
        }
        else     
        {
                const a = JSON.stringify(data);
        }         
      });
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

因此，当我点击按钮时，它将触发箭头功能并给出响应。控制台中的响应看起来像这样

   {"ResponseMetadata":{"RequestId":"12345"},"MetricDataResults":[{"Id":"m17","Label":"StandardStorage BucketSizeBytes","Timestamps":["2018-09-04T18:30:00.000Z"],"Values":[38497162],"StatusCode":"Complete","Messages":[]},{"Id":"m18","Label":"AllStorageTypes NumberOfObjects","Timestamps":["2018-09-04T18:30:00.000Z"],"Values":[10],"StatusCode":"Complete","Messages":[]}]}

为此我已经返回map函数来从上面的json中检索元素。地图功能就是这样的

var names = obj.MetricDataResults.map(function (MetricDataResults) {
  return MetricDataResults.Id + ' ' + MetricDataResults.Label + ' ' + MetricDataResults.Timestamps + ' ' + MetricDataResults.Values + ' ' + MetricDataResults.StatusCode + ' ' + MetricDataResults.Messages;
});

假设一切都存储在变量obj中。

现在我对两件事情感到震惊：

1. 如何从函数中获取变量并在render()方法中使用它。
2. 我需要应用我的map函数显示我可以从json中检索元素并将其放在表中。

谢谢任何帮助表示赞赏。

Answer 1

您应该将数据保存在您的状态，然后将其呈现到DOM中。

const data = {
  ResponseMetadata: { RequestId: "12345" },
  MetricDataResults: [
    {
      Id: "m17",
      Label: "StandardStorage BucketSizeBytes",
      Timestamps: ["2018-09-04T18:30:00.000Z"],
      Values: [38497162],
      StatusCode: "Complete",
      Messages: []
    },
    {
      Id: "m18",
      Label: "AllStorageTypes NumberOfObjects",
      Timestamps: ["2018-09-04T18:30:00.000Z"],
      Values: [10],
      StatusCode: "Complete",
      Messages: []
    }
  ]
};

const fakeRequest = () =>
  new Promise(resolve => setTimeout(() => resolve(data)));

class App extends React.Component {
  state = {
    data: {}
  };

  handleClick = () => fakeRequest().then(data=> this.setState({ data }));

  renderResults = () =>
    this.state.data.MetricDataResults.map(MetricDataResults => (
      <div key={MetricDataResults.Id}>
        <p>ID: {MetricDataResults.Id}</p>
        <p>Label: {MetricDataResults.Label}</p>
        <p>Timestamp: {MetricDataResults.Timestamps}</p>
        <p>Values: {MetricDataResults.Values}</p>
        <p>StatusCode: {MetricDataResults.StatusCode}</p>
        <p>Messages: {MetricDataResults.Messages}</p>
      </div>
    ));

  render() {
    return (
      <div>
        {this.state.data.MetricDataResults &&
          this.renderResults()}
        <button onClick={this.handleClick}>Get results</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

根据您的情况设置您的州将是这样的：

cloudwatch.getMetricData(params, (err, data) => {
  if (err) {
    // if you want to keep error in the state
    this.setState({ error: error.stack });
  } else {
    // data should be in your state as data: {}
    this.setState({ data });
  }
});

Answer 2

应该是这样的：

  render() {
    return obj.MetricDataResults.map((MetricDataResults) => {
      return (
        <div>
          {MetricDataResults.Id + ' ' + MetricDataResults.Label + ' ' + MetricDataResults.Timestamps + ' ' + MetricDataResults.Values + ' ' + MetricDataResults.StatusCode + ' ' + MetricDataResults.Messages}
        </div>
      );
    });
  }

Answer 3

  render() {
    return obj.MetricDataResults.map(item => (
        <div>
          {`${item.Id} ${item.Label} ${item.Timestamps} ${item.Values} ${item.StatusCode} ${item.Messages}`}
        </div>
      );
    });
  }