サードパーティのサービスからデータを取得する

import React from 'react';
import { HeadingText, PieChart } from 'nr1';

export default class TotalCancellations extends React.Component {
  constructor() {
    super(...arguments);

    this.state = {
      cancellations: [],
      lastToken: null,
    };
  }

  generateChartData(data) {
    const cancellationsA = data ? data.a : 0;
    const cancellationsB = data ? data.b : 0;

    return [
      {
        metadata: {
          id: 'cancellations-A',
          name: 'Version A',
          viz: 'main',
          color: 'blue',
        },
        data: [{ y: cancellationsA }],
      },
      {
        metadata: {
          id: 'cancellations-B',
          name: 'Version B',
          viz: 'main',
          color: 'green',
        },
        data: [{ y: cancellationsB }],
      },
    ];
  }

  componentDidUpdate() {
    if (this.props.token && this.props.token != this.state.lastToken) {
      console.log(`Requesting data with api token ${this.props.token}`);

      fetch('https://api.nerdsletter.net/cancellations', {
        headers: { Authorization: `Bearer ${this.props.token}` },
      })
        .then((response) => {
          if (response.status == 200) {
            return response.json();
          } else if (response.status == 401) {
            console.error('Incorrect auth header');
          } else {
            console.error(response.text());
          }
        })
        .then((data) => {
          if (data) {
            this.setState({
              cancellations: this.generateChartData(data),
              lastToken: this.props.token,
            });
          }
        });
    }
  }

  render() {
    return (
      <div>
        <HeadingText className="chartHeader">
          Total cancellations per version
        </HeadingText>
        <PieChart data={this.state.cancellations} fullWidth />
      </div>
    );
  }
}