Реагировать js читать данные после загрузки

Question

Я использую materialui для построения панели мониторинга, используя reactjs, Моя проблема с компонентом Animation, он читает данные до того, как данные загружаются в componentwillMount. Мой вопрос заключается в том, как заставить компонент Animation читать данные после него. загружает Это мой код

   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>

  }

это ошибка:

    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 | }),

Answer 1

вам нужно загрузить компонент <Animation />, когда данные будут доступны, например

{this.state.data && this.state.data.length && <Animation />}