Гистограммы не отображаются в React Js с использованием перезарядок - PullRequest
Новая
       4

Гистограммы не отображаются в React Js с использованием перезарядок

0 голосов
/ 23 апреля 2019

Я пытаюсь построить гистограмму, используя Recharts в React js.Я извлекаю данные из API с помощью вызова извлечения и преобразую их в массив. Но когда он отображает barCharts, он становится пустым.

Может ли кто-нибудь помочь мне, где я иду не так 

var data1=[];



class BarChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      endDate: new Date(),
      count: false,
      formsubmit: false,
      formsubmit1: false,
      modalShow: false,
      items: [],
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }
   handleClick1 = e => {
    e.preventDefault();
     var URL =
       " http://localhost:8080/fetchdata;
    this.setState({ formsubmit: true });
    console.log(URL);
    fetch(URL, {
    method: "GET",
     })
     .then(res => res.json()).then(data=>
       {
     console.log("Response Success!!")
    this.setState({items:data});
    data1=this.state.items;
    console.log(this.state.items);
    }) 
  };  

  render() {

    return (
      <div style={{ marginTop: 40 }}>


              <Button
                onClick={this.handleClick1}
                style={{
                  background:
                    "linear-gradient(to left bottom,rgb(31, 130, 167), rgb(161,215,232))",
                  fontSize: "small",
                  marginLeft: "20%"
                }}
              >
                VIEW METRICS
              </Button>
          </div>
               <div>
            {this.state.formsubmit && (
              <BarChart width={500} height={300} data={data1}>
                <XAxis dataKey="Total" />
                <YAxis />
                <Tooltip cursor={false} />
                <Legend />
                <Bar dataKey="Success" stackId="a" fill="#8884d8" label />
                <Bar
                  dataKey="Failure"
                  onClick={this.handleClick}
                  stackId="a"
                  fill="#82ca9d"
                  label
                />
              </BarChart>
            )}
          </div>

    );
  }
}
export default withStyles(styles)(BarChart);`

Я проверил консольный журнал. Он отображает данные в массиве. enter image description here

Может кто-нибудь подсказать, где я ошибаюсь?

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Вы определяете объект obj как переменную, вам необходимо получить доступ к состоянию, чтобы при его изменении компонент повторно отображался. Помимо асинхронного запроса, ваша первая инициализация данных пуста, поэтому гистограмма становится неопределенной.

Изменить на: 

data={this.state.items}
0 голосов
/ 23 апреля 2019

<BarChart width={500} height={300} data={data1}> data1 изначально пуст и не находится в состоянии. поэтому, когда вы заполняете их данными, React не понимает, что они изменились, поэтому никакого повторного рендеринга не происходит <BarChart width={500} height={300} data={this.state.items}> должно работать, если не сделать функцию асинхронной и использовать await

...