如何将数据从值显示到图表中答案

【问题标题】：how to display the data into a chart from values如何将数据从值显示到图表中
【发布时间】：2021-08-18 07:48:51
【问题描述】：

我试图从我的虚拟 api 中可视化一些数据，这些数据在 n_data 模块中，但 data = this.state.new_data 没有返回任何内容

我的零食代码是https://snack.expo.io/@ej97/smelly-tortillas

如果指出我正确的方向，将不胜感激。

import React, { Component } from 'react';
import { View,Button,Text } from 'react-native';
import n_data from './data'
import { AreaChart, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'

class MyComponent extends Component {

  constructor() {
    super()
    this.state = {data:n_data,new_data:[]}
  
  }


componentDidMount() {
 let x = this.state.data.map(data => parseFloat(data.volume))
 this.state.new_data.push(x)
}


  render() {
     data = this.state.new_data
    return (
      <View>
      <AreaChart
                style={{ height: 200 }}
                data={data}
                contentInset={{ top: 30, bottom: 30 }}
                curve={shape.curveNatural}
                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
            >
                <Grid />
            </AreaChart>
      
            </View>
    );
  }
}

export default MyComponent;

【问题讨论】：

标签： reactjs react-native react-router react-hooks

【解决方案1】：

由于您没有使用setState，因此您的组件不知道状态发生了变化。

试试

componentDidMount() {
 let x = this.state.data.map(data => parseFloat(data.volume))
 this.setState({new_data:x})
}

更新零食代码：https://snack.expo.io/p4hcViE8A

【讨论】：