React Native onPress 函数不断被调用

Posted 2023-04-18

【中文标题】React Native onPress 函数不断被调用

【英文标题】：React Native onPress function keeps getting called

【发布时间】：2020-11-24 22:44:09

【问题描述】：

我正在尝试在本机反应中运行一个函数，当按下按钮时调用一个函数，但是一旦按下该按钮，该函数就会一遍又一遍地运行。如何修复代码以使这种情况不会发生。 add_password 函数是不断被调用的函数

function DetailsScreen( navigation, route ) 
  const [text3, setText3] = useState("");
  const [text4, setText4] = useState("");
  const  param1, param2  = route.params;

  let button_click = () => 
    add_password(text3, text4, param1, param2);
  ;

  return (
    <View style= flex: 1, alignItems: "center", justifyContent: "center" >
      <TextInput
        style= height: 40 
        placeholder="info"
        onChangeText=(text3) => setText3(text3)
        defaultValue=text3
      />
      <TextInput
        style= height: 40 
        placeholder="password"
        onChangeText=(text4) => setText4(text4)
        defaultValue=text4
      />
      <Button title="Add Password" onPress=button_click />
    </View>
  );

【参考方案1】：

Ciao，我从 github repo 获得了你的代码，然后为了测试它，我使用了 react-native-expo-gitpod。它只是一个可以在 gitpod 上运行的空项目。然后我将你的代码从 github repo 粘贴到 App.js 中并运行它。我在HomeScreen登录：

然后我填写了Details 信息和密码字段：

然后我点击了Add Password 按钮。结果是button_click 函数只被调用了一次！

这是DetailsScreen代码：

function DetailsScreen( navigation, route ) 
  const [text3, setText3] = useState("");
  const [text4, setText4] = useState("");
  const  param1, param2  = route.params;

  const button_click = () => 
      console.log("button_click");
    add_password(text3, text4, param1, param2);
  ;

  return (
    <View style= flex: 1, alignItems: "center", justifyContent: "center" >
      <TextInput
        style= height: 40 
        placeholder="info"
        onChangeText=(text3) => setText3(text3)
        defaultValue=text3
      />
      <TextInput
        style= height: 40 
        placeholder="password"
        onChangeText=(text4) => setText4(text4)
        defaultValue=text4
      />
      <Button
        title="Add Password"
        onPress=button_click />
    </View>
  );

和你的完全一样（除了检查函数被调用次数的日志）。

我收到的日志是：

calling add_password 是我放在add_password 函数中的另一个日志。

看来一切正常！

注意：这是我的package.json：

  "main": "node_modules/expo/AppEntry.js",
  "scripts": 
    "start": "expo start -c --host tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  ,
  "jest": 
    "preset": "jest-expo"
  ,
  "dependencies": 
    "@expo/samples": "~3.0.3",
    "@expo/vector-icons": "^10.0.3",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "expo": "^35.0.0",
    "expo-asset": "^7.0.0",
    "expo-constants": "^7.0.0",
    "expo-font": "^7.0.0",
    "expo-web-browser": "^7.0.0",
    "firebase": "^7.17.2",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-safe-area-context": "^0.3.6",
    "react-native-screens": "^2.10.1",
    "react-native-web": "^0.11.7",
    "react-navigation": "^3.12.0"
  ,
  "devDependencies": 
    "babel-preset-expo": "^7.0.0",
    "jest-expo": "^35.0.0"
  ,
  "private": true

【讨论】：

我更改了它，但没有工作它仍然在按 1 次后继续运行。

Ciao，好奇怪……你能给我看看add_password函数吗？

它不会让我将函数放在评论中，因为它太长了，但函数不是问题，而是它被连续调用。添加密码功能只是对数据库中的条目进行更改。

这里是一个指向 repo github.com/RobertBeit/Vault 的链接，出于安全原因，我排除了 firebase 配置

我邀请你了。您现在应该可以访问它了。