更新由：RNSVGPath InvalidNumber 管理的视图的属性“d”时如何解决错误

Question

我需要使用 react-native-chart-kit 加载我的 SQL 服务器数据，但是当我使用此代码时，我收到此错误：

更新由以下人员管理的视图的属性“d”时出错：RNSVGPath null InvalidNumber

import React from "react";

import { Text, View, Dimensions } from "react-native";

import { LineChart } from "react-native-chart-kit";

export default class Home extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      isLoading: true,

      data: {

        labels: [

          "Gen",

          "Feb",

          "Mar",

          "Apr",

          "Mag",

          "Giu",

          "Lug",

          "Ago",

          "Set",

          "Ott",

          "Nov",

          "Dic",

        ],

        datasets: [

          {

            data: [],

          },

        ],

      },

    };

  }

  GetData = () => {

    const self = this;

    return fetch("http://192.168.1.5:80/graph.php")

      .then((response) => response.json())

      .then((responseJson) => {

        // clone the data from the state

        const dataClone = { ...self.state.data };

        const values = responseJson.map((value) => value.ChiffreAffaire);

        dataClone.datasets[0].data = values;

        self.setState({

          isLoading: false,

          data: dataClone,

        });

      })

      .catch((error) => {

        console.error(error);

      });

  };

  render() {

    return (

      <View>

        <LineChart

          data={this.state.data}

          width={Dimensions.get("window").width} // from react-native

          height={220}

          yAxisLabel={"$"}

          chartConfig={chartConfig}

          bezier

          style={{

            marginVertical: 8,

            borderRadius: 16,

          }}

        />

      </View>

    );

  }

}

我从我的 php 文件中获得的数据如下：[{"ChiffreAffaire":"4800.00"},{"ChiffreAffaire":"12000.00"}]

我不知道问题是什么以及为什么会出现此错误；请如果你有任何想法

Answer 1

我解决了我的问题！！！！对于那些有同样问题的人，我会向你解释错误：问题是我的 LineChart 在完全重新加载之前获取数据，因此它变为空，这是一个无效的数字格式；所以你要做的是在返回之前添加渲染方法：&nbsp;if(this.state.isLoading){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <View style={{flex: 1, padding: 20}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ActivityIndicator/>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; )&nbsp; }因此，在加载所有数据之前，我们不会传递给 LineChart

Answer 2

这对我有用：{&nbsp; &nbsp; this.state.loadComplete &&&nbsp; &nbsp; &nbsp; &nbsp; (<LineChart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={this.state.dt}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width={Dimensions.get("window").width} // from react-native&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={this.height}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxisLabel=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxisSuffix="b"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxisInterval={1} // optional, defaults to 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartConfig={this.config}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bezier&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginVertical: 8,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderRadius: 16&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; />)}