在renderitem内部,外部传递组件状态 React Native

问题描述

我有一个在每个元素中都有一个计数器的列表,并且我想将每个计数器值发送到实时数据库我有Counter类,它具有所需的状态,以及与此有关的一些功能。 在外面,我有一个按钮,单击后应将数据发送到数据库。 目前,它会将相同的数据发送到数据库,因为我无法弄清楚如何在代码数据库部分中使用Counter类的“ count”状态变量。

    function leaderboardScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {
            team1name: "a",team1logo: require("../assets/img1.png"),team1Spot: "1st",team2name: "b",team2logo: require("../assets/img2.png"),team2Spot: "4th",},]}
        keyExtractor={(item,index) => index.toString()}
        renderItem={({ item }) => (
          <>
            <View style={styles.game}>
              <View style={styles.teamsNames}>
                <Text style={styles.title}> {item.team1name} </Text>
                <Text style={styles.title}> {item.team2name} </Text>
              </View>
              <View style={styles.gameRow}>
                <Image style={styles.logo} source={item.team1logo} />
                <Counter /> //This is where the counter is located.
                <Text style={styles.scoreDash}> - </Text>
                <Counter /> //This is where the counter is located.
                <Image style={styles.logo} source={item.team2logo} />
              </View>
              <View style={styles.teamsNames}>
                <Text style={styles.subtitle}> {item.team1Spot} </Text>
                <Text style={styles.subtitle}> {item.team2Spot} </Text>
              </View>
            </View>
            <View style={styles.border} />
          </>
        )}
      />
      <TouchableWithoutFeedback 
        onPress={() => {
          const app = new App();
          app.writeUserData(Counter.name,"team1","team2"); //This is where I want the state to be used.
        }}
      >
        <View style={styles.circle}>
          <MaterialIcons
            style={styles.check}
            name="done"
            size={30}
            color="white"
          />
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
}

这是counter.js(状态):

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,countColor: "black",upColor: "black",downColor: "grey",};
  }

任何建议将不胜感激!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)