无法读取属性' dataSets'未定义的

时间:2018-04-19 08:07:08

标签: react-native charts

更新折线图数据时,我总是遇到此错误。我知道setState是错误的,但找不到具体的修改方法,并寻求帮助。谢谢。

enter image description here

enter image description here

我认为这是问题,但没有解决方案。

  this.setState({
      data: {
        ...this.state.data.$set,
        dataSets:[{
          ...this.state.data.$set.dataSets[0],
          values
        }]
      },
    xAxis: {
      ...this.state.xAxis.$set.valueFormatter,
      valueFormatter,
      axisMaximum,
      axisMaximum
    },
  }) 

图表github地址: https://github.com/wuxudong/react-native-charts-wrapper

1 个答案:

答案 0 :(得分:0)

这是源代码,只是上传了图片,感觉不适合阅读。

componentDidMount() {
  this.setState(
    update(this.state, {
      data: {
        $set: {
          dataSets: [{
            values: [{y: 10}, {y: 20}, {y: 30.11}, {y: 25.77}],
            label: 'LineChart',
            config: {
              lineWidth: 0.5,
              drawCircles: false,
              highlightColor: processColor('red'),
              color: processColor('red'),
              drawFilled: true,
              fillColor: processColor('red'),
              fillAlpha: 60,
              valueTextSize: 15,
              valueFormatter: "##.000",
            }
          }],
        }
      },
      xAxis: {
        $set: {
          fontFamily:"HelveticaNeue-Medium",
          fontWeight:"bold",
          fontStyle:"italic",
          valueFormatter: ['2017-01-01 10:00:000','2017-02-01 10:00:000','2017-03-01 10:00:000'],
          position: 'BOTTOM' ,
          drawGridLines: false
        }
      },
      yAxis: {
        $set: {
          left: {
            drawLabels: true,
            drawAxisLine: true,
            drawGridLines: false,
            drawValueAboveBar:false,
            zeroLine: {
              enabled: true,
              lineWidth: 1
            }
          },
          right: {
            enabled: false
          }
        }
      },
    })
  );
}

componentWillReceiveProps(nextProps) {
  debugger;
  if (nextProps.zxData !== this.props.zxData) {
    let values=[];
    let valueFormatter=[];
    let axisMaximum=nextProps.zxData.length;
    nextProps.zxData.map((item,key)=>{
    values.push({y:item.YValue});
    valueFormatter.push(item.XValue);
    })
    this.setState({
      data: {
        ...this.state.data.$set,
        dataSets:[{
          ...this.state.data.$set.dataSets[0],
          values
        }]
      },
    xAxis: {
      ...this.state.xAxis.$set.valueFormatter,
      valueFormatter,
      axisMaximum,
      axisMaximum
    },
  })   
  }
}