0

I'm using materialui to build a dashboard using reactjs,My problem is with the Animation component , it reads the data before the data loads in componentwillMount My question is how to force the Animation component to read the data after it loads . This is my code

   async componentDidMount(){
    let responses = []
    for (let i = 0; i < 13; i++) {
      responses.push(await axios.get("http://localhost:5000/transfer/getCapitalByDay/"+i).then(res =>{
          return res.data
      }))
    }
  Promise.all(responses).then(results => {
    this.setState(prevState => {
      return {

            data: [...prevState.data, ...results.map(r => r)]
       };
    })
  }

  )
           }
   render() {
    const { data: chartData } = this.state;
    const { classes } = this.props;
      if (chartData !== []) {
        console.log(chartData)
        return (
          <Paper>
            <Chart
              data={chartData}
              className={classes.chart}
            >
              <ValueScale name="amount" />
              <ArgumentAxis  showGrid showLine showTicks/>
              <ValueAxis
                max={50}
                labelComponent={ValueLabel}
                tickFormat={format} position="left" showGrid showLine showTicks/>

              <LineSeries
                name="Capital(IMFToken)"
                valueField="amount"
                argumentField="day"
              />


              <Legend position="bottom" rootComponent={Root} itemComponent={Item} labelComponent={Label} />
              <Title
                text={`Capital en fontion du temps`}
                textComponent={TitleText}
              />
              <Animation />
            </Chart>
          </Paper>
        );
      }
      else return <h1>Loading</h1>

  }

this is the error :

    TypeError: Cannot read property 'arg' of undefined
(anonymous function)
src/utils/animation.ts:105
  102 |   const startCurCoord = coordinates[index];
  103 |   return {
  104 |     ...coord,
> 105 |     arg: lerp(startCurCoord.arg, coord.arg, progress),
      | ^  106 |     val: lerp(startCurCoord.val, coord.val, progress),
  107 |   };
  108 | }),
1
  • Have you taken a look into your data after it is fetched from the server? Commented Mar 16, 2020 at 12:17

1 Answer 1

1

you need to load the <Animation /> component once data will be available like

{this.state.data && this.state.data.length && <Animation />} 
Sign up to request clarification or add additional context in comments.

1 Comment

A ternary is not required. {this.state.data && this.state.data.length && <Animation />} is sufficient.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.