代码之家 › 专栏 › 技术社区 › Private

获取我的箭头函数输出,并在React的render component中以表格格式显示它

reactjs javascript

Private · 技术社区 · 6 年前

我试图从我的arrow函数中获取数据,并在每次单击按钮时以表格格式显示它。

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 .

如何从函数中获取变量并在函数中使用 render()
在我需要应用map函数的地方,我可以从json中检索元素并将其放入表中。

谢谢感谢任何帮助。

3 回复 | 直到 6 年前

devserkan 6 年前

您应该将数据保持在您的状态,然后将其呈现到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 });
  }
});

KATq 6 年前

应该是这样的:

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

Matias Del Carlo 6 年前

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