Блог

Главная - Вопросы по программированию - React Native: использование переменных в функции рендеринга из метода

React Native: использование переменных в функции рендеринга из метода

#javascript #react-native #methods #react-props #linechart

#javascript #react-native #методы #react-props #линейная диаграмма

Вопрос:

Предполагается, что мой код попросит пользователя выбрать диапазон из модального календаря, нажав Выбрать диапазон дат. Затем выполняется вызов api в MAIN и извлекаются данные из GOOGLE. Все работает нормально, теперь я хочу отобразить данные, идентифицированные как MyData в MAIN. Данные должны использоваться моим compenent BPM. У меня возникли проблемы с фактическим использованием MyData для заполнения графика. Как мы передаем переменную? Я новичок в React Native… помощь была бы очень признательна!

 import React, { Component , useState} from "react";
import { Text, View, StyleSheet, Button, Dimensions} from "react-native";
const screenWidth = Dimensions.get("window").width;
var randomColor = Math.floor(Math.random()*16777215).toString(16);
import { DatePickerModal } from 'react-native-paper-dates'
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart,
} from "react-native-chart-kit";
import axios from "axios";
import firebase from "firebase";

const BPM=()=>{
  
   const myData= [1,2,4,5,6,7,3];
return(
  <LineChart
      data={{
      title: "Beats per minute",
      withVerticalLabels: true,
      withHorizontalLabels: true,
      datasets: [
        { data: 
          myData
        }
      ]
    }}
    width={screenWidth} // from react-native
    height={220}

    chartConfig={
      chartConfig
    }
    bezier
    style={{
      marginVertical: 8,
      borderRadius: 16
    }}
  />

)

}



export default class ProfileScreen extends Component {

  
  MAIN = async (idToken, accessToken) =>{
    const fit_data= await GFIT(accessToken, idToken)
    UPLOAD_FIT_DATA(accessToken,idToken,fit_data)
    const myData= (FORMAT_FIT_DATA(fit_data))

    }
    render() {

    return (
      <View style={styles.container}>
        <Text> Profile Screen </Text>
        <Text style={{ fontSize: 20, fontWeight: "bold" }}>
          Welcome, {this.props.navigation.getParam("username")
          }
        </Text>
        <Button
          title="Update My Dashboard"
          onPress={() =>{this.MAIN(this.props.navigation.state.params.idToken, this.props.navigation.state.params.accessToken)}}
        />
        <Text>
          {myData}

        </Text>
      <Calendar />
        <BPM  />



        <Button
          title="Sign out"
          onPress={() => this.props.navigation.navigate("Login")}
        />
      </View>
    );
  }
}


 
function FORMAT_FIT_DATA(fit_data){

const {minStartTimeNs, maxEndTimeNs,dataSourceId, point}=fit_data
let myData= [point.length]
for (let i=0; i<point.length;i  )
{
 myData[i]=point[i].value[0].fpVal

}
return(myData)
}

Ответ №1:

Похоже, что вы собираетесь визуализировать данные в компоненте BPM

Вы могли бы передать данные следующим props образом: BPM 

 const BPM=(props)=>{

return(
  <LineChart
      data={{
      title: "Beats per minute",
      withVerticalLabels: true,
      withHorizontalLabels: true,
      datasets: [
        { data: 
          props.data
        }
      ]
    }}
    width={screenWidth} // from react-native
    height={220}

    chartConfig={
      chartConfig
    }
    bezier
    style={{
      marginVertical: 8,
      borderRadius: 16
    }}
  />

)

}

Im MAIN, мы могли бы сохранить myData в состояние ProfileScreen by

 this.setState({ myData });

И в render() методе ProfileScreen 

 <BPM data={this.state.myData} />

Комментарии:

1. Я пробовал это, но это говорит мне, что они не могут найти переменную myData. Кроме того, когда я пишу «data= {myData}» в моем вызове компонента BPM, переменная myData в MAIN по-прежнему не выделена жирным шрифтом, что указывает на то, что я на самом деле не вызываю переменную из своей функции рендеринга. Это проблема, с которой я столкнулся, и не уверен, как ее исправить. Я просто не могу передать myData из main в render(), а затем в BPM. Есть мысли?

2. Я думаю, вы могли бы сохранить myData в MAIN состоянии ProfileScreen к this.setState({ myData }); тому времени в методе рендеринга, <BPM data={this.state.myData} />

3. спасибо, у меня получилось! удачи, брат / сестра!

4. Мне немного любопытно… Как вы заставляете это работать?

Метки: