React Native：在方法的渲染函数中使用变量

Question

我的代码应该要求用户通过按选择日期范围从日历模式中选择一个范围。然后通过 MAIN 中的 api 调用并从 GOOGLE 检索数据。一切正常，现在我想绘制数据，在 MAIN 中标识为 MyData。数据将由我的主管 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)
}

Answer 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
    }}
  />

)

}

我是 MAIN，我们可以将 myData 存储到 ProfileScreen 的状态

this.setState({ myData }); 

而在ProfileScreen的render()方法中

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