更新由以下人员管理的视图的属性‘%d’时出错: RNSVGPath

Question

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

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

每当我成功获取时，sData[]就会被填满。但是，我的图表仍然显示错误:更新由以下对象管理的视图的属性'd‘时出错: RNSVGPath null尝试对null对象引用调用接口方法'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}
          />
        ),
      )}

Answer 2

remove - yarn remove react-native-svg add - yarn add react-native-svg@9.13

这对我很管用