IDONTSUDO
@IDONTSUDO
Java scrit?Я пытался

React this.setState, как задать number?

У меня есть REST по адресу.

[get] /user/statistics/menu/5d29bb93669a92273c7bdf55

Он присылает массив пользовательских значений. Которые я в последствии должен отрендерить в state компонента. Как мне сделать так что бы то что у меня отрендерилось в state. Было типа 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":"w@w.com"}

//Описание компонента
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>
      
    );
  }
}

5d2b034e3a204206985609.jpeg
State начинает быть таким
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
IDONTSUDO
@IDONTSUDO Автор вопроса
Java scrit?Я пытался
Все дело было в моем не допонимании.

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>
      
    );
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
FUELUP Москва
от 100 000 до 150 000 руб.
YLab Тольятти
от 80 000 до 120 000 руб.
25 авг. 2019, в 14:05
60000 руб./за проект
25 авг. 2019, в 13:47
1000000 руб./за проект