如何解决在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 举报,一经查实,本站将立刻删除。