Creé una breve prueba para obtener una explicación de cómo reacciona mi código.
Básicamente, quiero llamar a una función solo cuando presiono mi botón. No hay problema, el siguiente código funciona.
// Components/Test.js import React, { useState } from "react"; import { View, StyleSheet, TextInput, Button } from "react-native"; function Test(props) { const [text, setText] = useState(""); const myFunction = () => { console.log("test"); }; return ( <View style={styles.container}> <TextInput style={{ borderWidth: 1, width: "70%" }} onChangeText={(text) => setText(text)} /> <Button title="Button" onPress={myFunction} /> </View> ); } // Styles const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); export default Test; Como estoy aprendiendo Javascript al mismo tiempo, pensé en poner paréntesis después de mi función. Técnicamente, si quiero pasar parámetros a mi función, pensé que debería hacerlo así. <Button title="Button" onPress={myFunction()} />
Y ahora con este cambio, mi "myFunction" se llama sistemáticamente si modifico el texto en TextInput.
¿Alguien puede explicar lo que está pasando? Gracias !
Deberías usar la función de flecha
<Button title="Button" onPress={() => myFunction('parameter')} />si solo llamas como
<Button title="Button" onPress={myFunction()} /> // its calling function directlyEs llamar a la función directamente
Funciones de flecha:
Todos los amamos, pero debemos tener cuidado al usarlos con React. Las funciones de flecha son geniales, nos permiten crear rápidamente nuevas funciones de JavaScript de forma abreviada. La consecuencia de esto es exactamente eso, crea una nueva función cada vez que se ejecuta. En su mayor parte en Javascript, esto no es un problema real. Cuando se trata del método de renderizado React, esto puede convertirse rápidamente en un problema.
render(){ return ( <View> <TouchableOpacity onPress={() => console.log('Hello!')}> Click Me </TouchableOpacity> </View> ) }Entonces, ¿cuál podría ser el daño aquí? El botón simplemente cierra la sesión de una cadena al presionar. Pero, de hecho, cuando React ejecuta este método de renderizado, siempre verá una nueva función. La función flecha devuelve una nueva función cada vez. Esto hace que React piense que algo ha cambiado desde nuestro punto de vista, cuando en realidad nada ha cambiado.
logHello(){ console.log('Hello!'); } render(){ return ( <View> <TouchableOpacity onPress={this.logHello}> Click Me </TouchableOpacity> </View> ) }Cada vez que cambia el texto, el estado del componente también cambia porque ha usado onChangeText={(text) => setText(text)} , esto hace que su componente se vuelva a procesar.
Durante el re-render, también se ejecuta la siguiente línea. En esta línea estás llamando myFunction. <Button title="Button" onPress={myFunction()} />
En resumen, cambiar el texto provoca la actualización del estado, lo que a su vez provoca una nueva representación, y durante esa nueva representación se llama a myFunction.