如何根据值将数据显示到图表中

Question

我正在尝试可视化来自我的dummy 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;

Answer 1

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

试一试

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

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