React this.setState how to set number?

Question

JSON

I have a REST on an address.
[get] /user/statistics/menu/5d29bb93669a92273c7bdf55
It sends an array of user values. Which I later have to render in the state of the component. How can I make it so that what I have rendered in state. It was of type Number.

//Массив значений который приходит с REST.
{"April":0,"August":0,"December":0,"February":0,"January":0,"July":0,"March":0,"May":0,"November":0,"October":0,"September":0,"_id":"5d29bb93669a92273c7bdf55","name":"OOO steve jobs","email":"[email protected]"}

//Описание компонента
import React, { PureComponent } from 'react';
import {  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'; //rechart для графиков
import {isAuthenticated} from '../api/AuthApi' // передает userId и token 
import {getStatistic} from '../api/UserApi' //getStatistic получает пользовательскую статистику

export default class Example extends PureComponent {
  constructor(){
    super()
      this.state = {
            April: 11,
            August: 55,
            December: 0,
            February: 10,
            January: 0,
            July: 0,
            June: 1,
            March: 1,
            November: 1,
            October: 1,          
            September: 11,
            May: 2,
            redirectToSignin: false,
            error: ""
  }
}
  
  componentDidMount(){
    const token = isAuthenticated().token
    const UserId = isAuthenticated().user._id
    getStatistic(UserId,token)//Получение статистики
    .then(data =>{
      if(data){
          //Таким способом он не меняет state. 
          this.setState({April:Number ,August:Number ,December:Number ,February:Number ,January:Number ,July:Number ,March:Number ,May:Number ,Novemberv:Number ,October:Number ,September:Number  })
      }else{
          this.setState({error: data.error })
      }
  })

  }
  render() {//код для отрисовки графиков
    const data = [
      {
        name: 'Декабарь', uv: this.state. December, pv: 2400, amt: 2400,
      },
      {
        name: 'Февраль', uv: this.state.February, pv: 1398, amt: 2210,
      },
      {
        name: 'Март', uv: this.state.March, pv: 9800, amt: 2290,
      },
      {
        name: 'Апрель', uv: this.state.April, pv: 3908, amt: 2000,
      },
      {
        name: 'Май', uv: this.state.May, pv: 4800, amt: 2181,
      },
      {
        name: 'Июнь', uv: this.state.June, pv: 3800, amt: 2500,
      },
      {
        name: 'Июль', uv: this.state.July, pv: 4300, amt: 2100,
      },
      {
        name: 'Август', uv: this.state.August, pv: 4300, amt: 2100,
      },
      {
        name: 'Сентябрь', uv: this.state.September, pv: 4300, amt: 2100,
      },
      {
        name: 'Октябрь', uv: this.state.October, pv: 4300, amt: 2100,
      },
      {
        name: 'Ноябрь', uv: this.state.November, pv: 4300, amt: 2100,
      },
      {
        name: 'Январь', uv: this.state.January, pv: 4300, amt: 2100,
      },
    ];
    return (
      <div>
      <AreaChart
        width={1000} 
        height={400}
        data={data}
        margin={{
          top: 30, right: 30, left: 30, bottom: 30,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
      </AreaChart>
      </div>
      
    );
  }
}

State starts to look like this

Answer 1

It was all about my misunderstanding.

export default class Example extends PureComponent {
  constructor(){
    super()
      this.state = {
            statistic:[], //state начал принимать массив обьектов
            redirectToSignin: false,
            error: ""
  }
}
  
  componentDidMount(){
    const token = isAuthenticated().token
    const UserId = isAuthenticated().user._id
    getStatistic(UserId,token)
    .then(data =>{
      if(data){
          this.setState({statistic:data}) //Вот он его берет
      }else{
          this.setState({user: data})
      }
  })

  }
  render() {
    const statistic = this.state //Импортируем из state массив и выводим его в charty график.
    const data = [
      {
        name: 'Декабарь', uv: this.state.statistic.December, pv: 2400, amt: 2400,
      },
      {
        name: 'Февраль', uv: this.state.statistic.February, pv: 1398, amt: 2210,
      },
      {
        name: 'Март', uv: this.state.statistic.March, pv: 9800, amt: 2290,
      },
      {
        name: 'Апрель', uv: this.state.statistic.April, pv: 3908, amt: 2000,
      },
      {
        name: 'Май', uv: this.state.statistic.May, pv: 4800, amt: 2181,
      },
      {
        name: 'Июнь', uv: this.state.statistic.June, pv: 3800, amt: 2500,
      },
      {
        name: 'Июль', uv: this.state.statistic.July, pv: 4300, amt: 2100,
      },
      {
        name: 'Август', uv: this.state.statistic.August, pv: 4300, amt: 2100,
      },
      {
        name: 'Сентябрь', uv: this.state.statistic.September, pv: 4300, amt: 2100,
      },
      {
        name: 'Октябрь', uv: this.state.statistic.October, pv: 4300, amt: 2100,
      },
      {
        name: 'Ноябрь', uv: this.state.statistic.November, pv: 4300, amt: 2100,
      },
      {
        name: 'Январь', uv: this.state.statistic.January, pv: 4300, amt: 2100,
      },
    ];
    return (
      <div>
      <AreaChart
        width={1000} 
        height={400}
        data={data}
        margin={{
          top: 30, right: 30, left: 30, bottom: 30,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
      </AreaChart>
      </div>
      
    );
  }
}