react-native - 更新由 : RNSVGPath 管理的 View 的属性 'd' 时出错

Question

过去几天，我一直在为 react native 中的以下错误而苦苦挣扎。

我的意图:动态获取图表数据并在我的页面上绘制多个图表。

每当我成功获取时，sData[] 就会被填充。但是我的图表不断抛出错误:更新由 RNSVGPath 管理的 View 的属性“d”时出错无效的尝试在空对象引用上调用接口(interface)方法“int java.Charsequence.length()”

如果提取失败并且我的 sData 在代码中设置为默认数组 [5,4,3,2,1]，则图表能够呈现。

我错过了什么/弄乱了什么？请帮忙。

import React, { Component } from 'react';
import {AsyncStorage} from 'react-native';
import { LineChart, Grid } from 'react-native-svg-charts';
import { Container, Header, Content, List, ListItem, Text, Left, Right, Body , Button, Title} from 'native-base';

const data = [1,2,3,4,5,6,7];

export default class SomeDetails extends Component {

  constructor(props)
  {
    super(props);
    this.state = { 'user': '',
                    'email': '',
                    'privLevel': '',
                    'phNum': '',  
                    UserApiUrl: '<SOMEAPI>',              
                    sData: [],
                    someData: ''
     }
  }

  componentDidMount() {
    this._loadInitialState().done();
  }

  _loadInitialState = async () => {
    var uPhVal = await AsyncStorage.getItem('uPh');
    var uEmailVal = await AsyncStorage.getItem('uEmail');
    var uPrivVal = await AsyncStorage.getItem('uPlevel');
    var uName = await AsyncStorage.getItem('username');

    if(uName !== null)
    {
      this.setState({'user': uName});
      this.setState({'phNum': uPhVal});
      this.setState({'email': uEmailVal});
      this.setState({'privLevel':uPrivVal})
    }

    var postString = "SOME STRING FOR MY API" 
    console.log(postString);
    response  = await fetch(this.state.UserApiUrl, {
        method: 'POST',
        body: postString
    })
    res = await response.json();
    console.log(res.success);
    if (res.success == "true") {
        this.setState({ someData: res.someLatestVal });
        var dataItems = this.state.someData.split(';');
        for(let j=0;j<dataItems.length; j++)
        {
            var dataI = dataItems[j].split(':');
            this.setState({sData: this.state.sData.concat([dataI[0]]) } ); 
        }
    }
    else {
        //  console.log("Req: Unable to fetch");
        this.setState({sData: [1,2,3,4,5]});
        this.setState({loading: true});
    }

     console.log(this.state.sData);

  }

  render() {

    const { navigation } = this.props;
    const someName = navigation.getParam('someName', 'no-name');

    return (
      <Container>
        <Content>
          <List>
            <ListItem>
              <Text>Sensorname: { someName } </Text>
            </ListItem>
            <LineChart
                style={{ height: 70, width: 120 }}
                data={ this.state.sData }
                svg={{ stroke: 'rgb(134, 65, 244)' }}
                contentInset={{ top: 20, bottom: 20 }} 
                >
            <Grid/>
            </LineChart>                

          </List>
        </Content>
      </Container>
    );
  }
}

Answer 1

我们通过确保 VictoryLine 始终获得至少 2 个数据点来解决此问题。如果只传递一个数据点，它可能会崩溃。

下面是简单检查数据集是否至少有两项的工作代码:

      {dataSetsWithGaps.map(coordList =>
        coordList.length < 2 ? null : (
          <VictoryLine
            key={`line_${coordList[0].x.toString()}`}
            interpolation={interpolationMethod}
            data={coordList}
          />
        ),
      )}