Как построить график в реальном времени данных Firebase с использованием реагировать родной?

Question

Я новичок в React Native и пытаюсь построить график данных в реальном времени в базе данных Firebase в реальном времени.

Это моя структура базы данных:

Я пытаюсь построить линейную диаграмму, используя 'response-native-svg-charts', где ось X имеет значения даты, а ось Y имеет значения 'sleep' - что также обновляется при добавлении нового узла.

Я мог бы получить необходимые данные из базы данных Firebase и добавить их в соответствующие массивы.

Sleeparr: Datearr:

Когда я использую массив stati c и кодирую значения - Я могу правильно построить график.

Но когда я использую datearr и sleeparr, который содержит данные моментальных снимков из Firebase и метод on () - я просто получаю пустой график (даже если в console.log ( ) оба массива правильные).

Мой код:

    render() {
        const sleeparr = []
        const sleep = db.ref('symptoms/');
        sleep.on('value', function(snapshot) {
          snapshot.forEach((childSnapshot) => {
          sleeparr.push(childSnapshot.val().sleep);
          });
          console.log(sleeparr);
        });


        const datearr =[]
        const date = db.ref('symptoms/');
          date.on('value', function(snapshot) {
          snapshot.forEach((childSnapshot) => {
            datearr.push(childSnapshot.val().date);   
          });
          console.log(datearr); 
});

        const axesSvg = { fontSize: 5, fill: '#008384', fontWeight: "400" };
        const verticalContentInset = { top: 10, bottom: 10 }
        const xAxisHeight = 30

        return (
            <View style={styles.container}>
                            <Text style={styles.heading}>Sleep Graph</Text>
            <View style={{ height: "80%", padding: 40, flexDirection: 'row' }}>

                <YAxis
                    data = {sleeparr}
                    style={{ marginBottom: xAxisHeight }}
                    contentInset={verticalContentInset}
                    svg={axesSvg} 

                />
                <View style={{ flex: 1, marginLeft: 10 }}>
                    <LineChart
                        style={{ flex: 1 }}
                        data={sleeparr}
                        contentInset={verticalContentInset}
                        svg={{ stroke: '#00bcd4', strokeWidth: 1.5 }}
                    >
                        <Grid/>
                    </LineChart>
                    <XAxis
                        style={{ marginHorizontal: -10, height: xAxisHeight }}

                       data = { datearr}
                       // formatLabel={(value, index) => value}
                       // formatLabel={(value, index) => datearr.value}                    
                        contentInset={{ left: 10, right: 10 }}
                        svg={axesSvg}
                    />
                </View>
            </View>
            </View>
        )
    }

}

export default SleepPlot

Может кто-нибудь сказать мне, что я делаю неправильно и как правильно отобразить график? (также проблема в том, что значения даты являются строками?)

Пожалуйста, помогите.

Answer 1

Используйте состояние

constructor() {
     super();
     this.state = {
         sleeparr: [],
     };
}

, затем извлеките данные и pu sh в массив sleeparr

 fetch_data = () => {
     const sleep = db.ref('symptoms/');
     sleep.on('value', (snapshot) => {
         let array = []
         snapshot.forEach((childSnapshot) => {
              array.push(childSnapshot.val().sleep);
         });
         for (let x = 0; x <= array.length; x++) {
             this.state.sleeparr.push({
                 x: x, y: JSON.parse("[" + array + "]")[x]
             });
         }
    });
}

И, наконец, используйте skelton для использования в качестве заполнителя

{this.state.sleeparr.length === 0 ? (
    <Skeleton
         variant="rect"
         width={650}
         height={420}
         style={{ marginTop: 20 }}
    />
    ) : (
    <LineChart
          data={this.state.sleeparr}
          viewBoxWidth={550}
          pointsStrokeColor="#000"
          areaColor="#000"
          areaVisible={false}
          gridVisible={false}
          pathColor="#f00"
          pathWidth={2}
          abelsColor="#000"
    />)
}

(я использую Skelton из material-ui) (импортировать Skeleton из "@ material-ui / lab / Skeleton";)