踢按钮时反应本机更改整数值答案

【问题标题】：React Native change integer value when button is kicked踢按钮时反应本机更改整数值
【发布时间】：2021-02-10 14:09:04
【问题描述】：

我在更改整数值时遇到问题，下面的代码显示了一个项目列表，并控制单击按钮时将显示多少个项目

点击时我想改变的变量，

var showdata = 5;

按钮的代码，希望在点击时将其更改为10，还希望文本更改为Less，并且第二次时showdata更改回5

 <View style={externalStyle.more_buttom}>
        <TouchableOpacity onPress={() => showdata == 10}>
          <Text
            style={{
              fontWeight: "bold",
              fontSize: 13,
              color: "#FFF",
            }}
          >
            More{" "}
          </Text>
        </TouchableOpacity>
      </View>

项目列表代码，显示“topTen.slice”中使用的数据

<ScrollView
    vertical
    showsHorizontalScrollIndicator={false}
    style={{ paddingBottom: 0 }}
  >
    {isLoadingTopTen ? (
      <Text
        style={{
          fontWeight: "bold",
          fontSize: 13,
          color: "#FFF",
          textAlign: "center",
        }}
      >
        Loading top ten
      </Text>
    ) : (
      topTen
        .slice(0, showdata)
        .map((item, index) => (
          <InfoCard
            navigation={navigation}
            brand={item.Name}
            amount={item.esgrating}
            key={index}
          />
        ))
    )}
  </ScrollView>

【问题讨论】：

标签： react-native

【解决方案1】：

使用 useState 挂钩来更改 showData 的值。


 const [showdata, setShowData] = useState(5)

//..........
 <View style={externalStyle.more_buttom}>
        <TouchableOpacity onPress={() => setShowdata(10)}>
          <Text
            style={{
              fontWeight: "bold",
              fontSize: 13,
              color: "#FFF",
            }}
          >
            More{" "}
          </Text>
        </TouchableOpacity>
      </View>

工作示例：Expo Snack

import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [showdata, setShowData] = useState(5);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => {
          setShowData(10);
        }}>
        <View style={{ backgroundColor: 'pink', padding: 10 }}>
          <Text
            style={{
              fontWeight: 'bold',
              fontSize: 13,
              color: '#000',
            }}>
            More {showdata}
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

【讨论】：