Question

我的查询要花2分钟以上的时间才能执行，因此它在浏览器中超时。因此，现在我中断了查询，并以单独的API运行，这很有帮助，但现在我不知道如何处理这三个请求，以便它可以呈现数据。

注意：API的数据将存储在react的State组件中，这里是“ Data”。

现在我有了一个逻辑，但是任何人都可以给我指导如何实现它。

逻辑：在将API的结果直接存储到状态组件之前，我们可以将其存储到其他数组中，然后我们可以循环访问此数组以使用饼图，然后可以将这些数据存储到状态组件中用于在“渲染”功能中渲染饼图。

在这里，我要同时进行三个不同的API调用并将其存储，这里将API的结果直接存储在状态组件中：

componentDidMount() {
    Promise.all([
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter"),
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter1"),
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter2")
    ])
      .then(([res1, res2, res3]) => 

      Promise.all([res1.json(), res2.json(), res3.json()]))

      .then(([data1, data2, data3]) => 

        this.setState({
          // Data: data1, data2, data3,
          Data: {
            labels: [
              "FY19 Q1[NOV-JAN]",
              "FY19 Q2[FEB-APR]",
              "FY18 Q3[SEP-NOV]"
            ],
            datasets: [
              {
                label: "",
                data: data1,
                backgroundColor: [
                  "rgba(255,105,145,0.6)",
                  "rgba(155,100,210,0.6)",
                  "rgb(63, 191, 191)"
                ]
              }
            ]
          }
        })
      );
  }

这是您处理数据表单API并循环遍历然后为各种图表呈现此数据的方式，在本例中为饼图：

ComponentDidMount() {
    axios.get(`http://localhost:4000/api/APJ/A_claimQuarter`)
***************************************************************
    .then(res => {
          const claims = res.data;
          let claim = [];

          claims.forEach(element => {
            claim.push(element.CNT1);

          });
********************************************************************
          this.setState({ 
            Data: {
              labels: ['FY19 Q1[NOV-JAN]','FY19 Q2[FEB-APR]','FY18[SEP-NOV]'],
              datasets:[
                 {
                    label:'',
                    data: claim ,

                    backgroundColor:[
                     'rgba(255,105,145,0.6)',
                     'rgba(155,100,210,0.6)',
                     'rgb(63, 191, 191)'

                  ]
                 }
              ]
           }
           });
       })
}

Answer 1

根据OP自己的答案，这是一个更通用的解决方案：

componentDidMount(graphData) {
    return Promise.all(graphData.map(dataObj => dataObj.url))
    .then(results => Promise.all(results.map(res => res.json())))
    .then(results => this.setState({
        'Data': {
            'labels': graphData.map(dataObj => dataObj.label),
            'datasets': [
                {
                    'label': '',
                    'data': results.reduce((prev, next) => prev.concat(next), []),
                    'backgroundColor': graphData.map(dataObj => dataObj.bgColor)
                }
            ]
        }
    }));
}

如您所见，数组方法.map()和.reduce()组成了一些不错的紧凑代码。

致电如下：

var quartersData = [
    { 'url':'http://localhost:4000/api/EMEA/E_claimQuarter', 'label':'FY19 Q1[NOV-JAN]', 'bgColor':'rgba(255,105,145,0.6)' },
    { 'url':'http://localhost:4000/api/EMEA/E_claimQuarter1', 'label':'FY19 Q2[FEB-APR]', 'bgColor':'rgba(155,100,210,0.6)' },
    { 'url':'http://localhost:4000/api/EMEA/E_claimQuarter2', 'label':'FY18 Q3[SEP-NOV]', 'bgColor':'rgb(63, 191, 191)' }
];

componentDidMount(quartersData)
.then(() => {
    console.log('complete');
});

Answer 2

我做了一些修改，现在对我来说很好用，如果有人希望您可以看一下我的答案，那是100％可行的：

  constructor(props) {
    super(props);

    this.state = {
      Data: []
    };
  }

  componentDidMount() {
    Promise.all([
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter"),
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter1"),
      fetch("http://localhost:4000/api/EMEA/E_claimQuarter2")
    ])
      .then(([res1, res2, res3]) => Promise.all([res1.json(), res2.json(), res3.json()]))
      .then(([data1, data2, data3]) => 
       { 
        console.log(typeof(data1));

        const array = [...data1, ...data2, ...data3];
        // const A = JSON.strigify(array);
        console.log('hi');
        console.log(array);
        console.log(data1);
        // console.log(A);
        let claim = [];

        array.forEach(element => {
        claim.push(element.COUNT);
        });
        console.log(claim);
        this.setState({
          // Data: data1, data2, data3,
          Data: {
            labels: [
              "FY19 Q1[NOV-JAN]",
              "FY19 Q2[FEB-APR]",
              "FY18 Q3[SEP-NOV]"
            ],
            datasets: [
              {
                label: "",
                data: claim,
                backgroundColor: [
                  "rgba(255,105,145,0.6)",
                  "rgba(155,100,210,0.6)",
                  "rgb(63, 191, 191)"
                ]
              }
            ]
          }
        })
       });
  }

在React和饼图中使用setState的多个获取请求

2 个答案: