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

Question

用例

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

这是我的 react 组件

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 中检索元素。而map函数是这样的

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