React Native onPress 函数不断被调用

Question

我正在尝试在本机反应中运行一个函数，当按下按钮时调用一个函数，但是一旦按下该按钮，该函数就会一遍又一遍地运行。如何修复代码以使这种情况不会发生。 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>
  );
}

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