Question

最近几天，我在React Native中遇到以下错误，一直在努力。

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

只要获取成功，sData []就会被填充。但是我的图表不断出现错误：更新由RNSVGPath管理的视图的属性“ d”时出错空值尝试在空对象引用上调用接口方法'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

有人可以发现我的svg中的错误吗？

import React from 'react'
import Svg, { G, Path } from 'react-native-svg'
/* SVGR has dropped some elements not supported by react-native-svg: style */

const SvgComponent = props => (
  <Svg
    id="prefix__Layer_1"
    x={0}
    y={0}
    viewBox="0 0 159.2 133.7"
    xmlSpace="preserve"
    {...props}
  >
    <G id="prefix__Group_1">
      <Path
        id="prefix__Path_1"
        className="prefix__st0"
        d="M0 84.5c10-.5 20 .6 29.6 3.1 18 4.5 34.2 14.1 47 27.5 2.7 2.9 4.1 2.7 6.8 0C102.1 96 125 85.8 151.8 84.5c2.3-.1 4.7-.5 7.5.6-4.7 4.2-8.8 7.6-15.5 8.4-22.9 2.8-41.8 13.8-57.6 30.4-4.3 4.5-8 4.6-12 .3-16.7-17.6-36.6-28.8-61-31.2-5.5-.5-8.4-4.8-13.2-8.5z"
      />
      <Path
        id="prefix__Path_2"
        className="prefix__st0"
        d="M15.2 68.4c21.3 1.7 42.2 9.8 60.7 24 3.1 2.4 4.9 2.7 8.2.1 18-14.2 39.8-22.6 62.6-24.1 1.8-.1 5.1-2 5.3 1.7.1 2.9.4 6.2-4.8 6.6-24 1.5-45 10.7-63 26.5-3 2.6-4.8 3-8 .2-17.5-15.8-39.6-25.2-63-26.9-4-.3-5.9-3-5.2-6.8.3-1.6.5-1.7 7.2-1.3z"
      />
      <Path
        id="prefix__Path_3"
        className="prefix__st0"
        d="M33.2 45.8c4.9 5.4 9.4 10.5 14 15.5 1.6 1.8 3.4 3.4 5.3 4.9 1.6 1.3 3.7 2.1 3.9-1.2.3-3.7 2.5-2.1 3.9-1.3 5.5 2.9 11 5.8 16.2 9 2.5 1.6 4.3 1.8 6.9 0 5.2-3.6 10.8-6.7 16.7-9.2 1.2-.5 3.1-2.1 3.4.8.5 4.8 3 2.7 4.8 1.2 5-4.2 9.2-9.3 13.5-14.2 1.6-1.8 2.7-4 5-5.1.3.3.6.4.7.7 4.7 11.5 5.7 12 17.7 8.5 2.1-.6 4.3-1.4 6.4-1.8 1.6-.3 4.1-2.2 4.5.6.3 2.3-.4 5.2-4 5.4-4.3.2-8.6.6-12.8 1.1-20.1 2.5-39.2 9.9-55.6 21.7-2.7 1.9-4.5 2-7.2.1a123.84 123.84 0 00-65.9-22.7c-1.4 0-2.7-.1-4.1-.4-2.8-.8-2.9-3.6-2.6-5.4.3-2.1 2.5-.9 3.8-.5 3.5.9 7 1.9 10.4 2.9 8 2.2 10 1.2 13.2-6.2.6-1.3 1.1-2.6 1.9-4.4z"
      />
      <Path
        id="prefix__Path_4"
        className="prefix__st0"
        d="M110.7 28.7c-.2 2.8-1.5 5.3-5.6 6.5-7.6 2.2-14.9 5.3-21.8 9.2-1.9 1.2-4.3 1.3-6.2.1-7.4-4.1-15.1-7.3-23.2-9.8-4.6-1.4-4.3-5-4.6-8.2-.3-3 2.2-1.2 3.3-.9 8.2 2.4 16.3 5.5 23.9 9.4 2.2 1.3 5 1.3 7.2 0 7.7-3.8 15.7-6.9 23.9-9.4 2.2-.6 3.8-1 3.1 3.1z"
      />
      <Path
        id="prefix__Path_5"
        className="prefix__st0"
        d="M53.4 43.4c7.8 2.4 15.3 5.7 22.4 9.8 3.2 1.8 5.5 1.6 8.5-.1 7.1-4.1 14.6-7.3 22.4-9.7.1 5.7-1.1 9.7-7.2 11.5-5.7 1.7-10.9 5-16 8.1-2.5 1.5-4.5 1.7-7 0-4.9-3.4-10.3-6.2-16-8.1-5.6-1.7-7.3-5.4-7.1-11.5z"
      />
      <Path
        id="prefix__Path_6"
        className="prefix__st0"
        d="M26 104.9c3.1-1.1 5.3.2 7.5 1.1 10.4 3.8 19.8 9.7 27.9 17.2 1.5 1.5 5.3 3.1 3.5 5.1-1.7 1.9-6.1 3-8.6 1-7.2-6.1-16.2-9.8-22.6-17-2.2-2.6-4.9-4.8-7.7-7.4z"
      />
      <Path
        id="prefix__Path_7"
        className="prefix__st0"
        d="M93.8 127.9c11.1-11.6 23.7-19.6 39.2-23.1-4.3 4.5-7.9 9.6-13 13.2-4.4 3-9.1 5.6-13 9.2-4.4 3.8-8.3 2.7-13.2.7z"
      />
      <Path
        id="prefix__Path_8"
        className="prefix__st0"
        d="M90.1 21.8c.1.8-.5 1.2-1 1.6-4.7 3.9-12.9 3.9-18 .2-2.8-2 0-3.6.3-5.3.4-1.9 1.5-3.2 3.7-1.9 2.8 1.6 5.5 2.2 8.7.5 3-1.5 6.5 1.4 6.3 4.9z"
      />
      <Path
        id="prefix__Path_9"
        className="prefix__st0"
        d="M79.7 0c1.7 2.7 5.3 4.8 2.8 8.3-1.1 1.6-3.8 1.4-5.1-.1C74.7 4.8 79.3 3 79.7 0z"
      />
      <Path
        id="prefix__Path_10"
        className="prefix__st0"
        d="M114.6 131.9c1.8-1.5 2.9-4.6 5.6-3.1 1.1.6 2.2 3.6 1.9 3.8-2.4 2-4.8-.6-7.5-.7z"
      />
      <Path
        id="prefix__Path_11"
        className="prefix__st0"
        d="M45.7 132.2l-7.9 1.5c0-2.6 1.1-4.9 2.6-5.3 2.1-.5 3.9 1.5 5.3 3.8z"
      />
    </G>
  </Svg>
)

export default SvgComponent

Answer 3

上述问题需要一些好的解决方案

Answer 4

去除-纱线去除react-native-svg 添加-纱线添加react-native-svg@9.13

对我有用

更新由RNSVGPath管理的视图的属性“ d”时出错

4 个答案: