Несколько запросов на выборку с помощью setState в React и круговой диаграмме - PullRequest
Новая
       34

Несколько запросов на выборку с помощью setState в React и круговой диаграмме

0 голосов
/ 10 июня 2019

Мой запрос выполнялся более 2 минут, отныне он получал тайм-аут в браузере.Итак, теперь я разбил запрос и теперь работаю как отдельные API, что полезно, но теперь я не знаю, как обрабатывать эти три запроса, чтобы он мог отображать данные.

Примечание: данные APIхранятся в компоненте State реакции, здесь это «Данные».

Теперь у меня есть логика, но кто-нибудь может подсказать мне, как ее реализовать.

Логика: перед сохранениемрезультат API непосредственно в компоненте состояния, мы можем сохранить его в другом массиве, затем мы можем перебрать этот массив для использования круговой диаграммы, затем эти данные могут быть сохранены в компоненте состояния, который можно использовать для визуализации круговой диаграммы вФункция «Render».

Здесь я делаю три разных вызова 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)'

                  ]
                 }
              ]
           }
           });
       })
}

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Я сделал некоторые изменения, и теперь он работает нормально для меня, если кто-то хочет ответ, который вы можете посмотреть на мой, он работает на 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)"
                ]
              }
            ]
          }
        })
       });
  }
0 голосов
/ 11 июня 2019

Основываясь на собственном ответе 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)
                }
            ]
        }
    }));
}

Как видите, методы Array .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');
});
...