javascript - React Native - 修改(添加)数据后图表不会正确重新呈现

Question

我在使用 Victory-Native 库创建图表时遇到问题(click here 访问它的文档)

我正在尝试创建一个动态图表。我将它的数据存储在状态中，如果按下“获取数据”按钮，我想修改。但是，我遇到了一个问题，经过 5 个小时的尝试，我无法自行解决。

我对 React 还是个新手，我试图弄清楚发生了什么，所以代码可能看起来完全是乱码。

图表没有重新渲染线条，而是渲染了线条但杀死了我的 Y 轴域。

这是具有正确域的图表，它应该看起来像(当您向它提供静态数据时):

注意:此时data[5]还是null，没有显示

按下蓝色的“GET DATA”按钮后，它会请求返回并放入数据[5] 中的值。然而，这完全杀死了 Y 轴而不是重新渲染线。我究竟做错了什么？我希望该行继续正常使用我在代码中设置的域。

这是会发生但不应该发生的事情:

如何让图表正确呈现新值？

代码:

import React, {Component} from 'react';
import {AppRegistry, View, Button, Text} from 'react-native';
import { VictoryChart, VictoryLine, VictoryTheme } from "victory-native";


class testChart extends Component {

  constructor(props) {

    super(props);

    this.state = {


      data: [

        {data: 0, times: 0},
        {data: 42, times: 1},
        {data: 11, times: 2},
        {data: 54, times: 3},
        {data: 22, times: 4},
        {data: null, times: null}


      ]

  };
}

  getDataBtn = () => {

    const that = this;

    fetch('http://192.168.1.111/getData').then(function(response){

      let dataRsp = JSON.stringify(response.text());

      let strData = dataRsp.substring(dataRsp.indexOf('Data:'), dataRsp.indexOf('.'));

      var numData = strData.replace( /^\D+/g, ''); // ekstrakcija stevilk iz stringa

      that.state.data[5].data = numData;
      that.state.data[5].times = 5;

      that.setState({data: that.state.data});
      that.setState({text: JSON.stringify(that.state.data)});

    });
}

  render() {

    return(

      <View>
        <Button color='blue'  title='Get Data' onPress={() => this.getDataBtn()} />
        <Text>Current DATA object value: {JSON.stringify(this.state.data)}</Text>
        <VictoryChart theme={VictoryTheme.material} domain={{x: [0, 10], y: [0, 100]}}>
          <VictoryLine
            data={this.state.data}
            x='times'
            y='data'
          />
        </VictoryChart>
      </View>

    );

  }
}

AppRegistry.registerComponent('test', () => testChart);

Answer 1

我认为这可能是因为 numData 是一个 string 而不是 int。请尝试执行以下操作

that.state.data[5].data = parseInt(numData);