问题
I need to load my sql server data using react-native-chart-kit ,but when I use this code I get this error :
Error while updating property 'd' of a view managed by: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>
);
}
}
The data I get from my php file is like :[{"ChiffreAffaire":"4800.00"},{"ChiffreAffaire":"12000.00"}]
<?php
$serverName="DESKTOP-T5SLVUB\SQL2008R2";
$connectionInfo=array("Database"=>"Netos_DB","UID"=>"sa","PWD"=>"123");
$conn=sqlsrv_connect($serverName,$connectionInfo);
$sql = "select ChiffreAffaire from V502_client where Mois=2 and Annee=2020 ";
$stmt = sqlsrv_query( $conn, $sql );
while( $row[] = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ){
$Item = $row;
$json = json_encode($Item);
}
echo $json;
?>
I don't know what is the problem and why I m getting this error ; please if you have any Idea
回答1:
I resolved my problem !!!! for those having same problem ,I will explain the error to u : Well the problem was that my LineChart take data before its reload completely so it gets null and this an Invalid format of number ;
So what you have to do ,is add in render method before return :
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
So we are not going to pass to LineChart until allll data is loaded
回答2:
This works for me:
{
this.state.loadComplete &&
(<LineChart
data={this.state.dt}
width={Dimensions.get("window").width} // from react-native
height={this.height}
yAxisLabel=""
yAxisSuffix="b"
yAxisInterval={1} // optional, defaults to 1
chartConfig={this.config}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>)
}
来源:https://stackoverflow.com/questions/60485319/how-to-resolve-error-while-updating-property-d-of-a-view-managed-byrnsvgpath