Chicos, soy nuevo en React Native y tampoco soy bueno en JavaScript. En mi aplicación, tengo 2 entradas de texto y un botón que se puede presionar, pero la salida no tiene sentido. Intenté cambiar el tiempo de ejecución de algunas líneas, pero el resultado es el mismo.
Estoy usando: expo, react native 0.68.2, android api 30 (Android Studio)
producción:
Paquete de Android completo 32ms
primer clic
Descripción del REGISTRO:
Identidad de REGISTRO:
Segundo clic
Descripción del REGISTRO:sadasdas
Identidad de REGISTRO: 12345678910
Informe.js
export default function Report({ route, navigation }) { const [enteredText, setEnteredText] = useState(""); const [enteredId, setEnteredId] = useState(""); const [description, setDescription] = useState(""); const [identity, setIdentity] = useState(""); function descriptionInputHandler(enteredText) { setEnteredText(enteredText); //console.log("entered text :" + enteredText); } function identityInputHandler(enteredId) { setEnteredId(enteredId); //console.log("entered id :" + enteredId); } function buttonHandler() { setDescription(enteredText); setIdentity(enteredId); setEnteredText(""); setEnteredId(""); console.log("description :" + description); console.log("identity :" + identity); } return ( <View style={styles.container}> <Text style={styles.title}>{category}</Text> <View style={styles.inputContainer}> <TextInput style={styles.longTextInput} placeholder="Describe your situation, don't worry we are here." onChangeText={descriptionInputHandler} value={enteredText} /> <TextInput style={styles.textInput} placeholder="What is your identity number." onChangeText={identityInputHandler} value={enteredId} /> <Pressable style={styles.button} onPress={buttonHandler}> <Text style={styles.text}>Send report!</Text> </Pressable> </View> </View> ); }No se garantiza que la mutación del estado sea sincrónica (y la mayoría de las veces no lo es). Entonces, justo después de usar setDescription , no puede estar seguro de que la description tendrá el último valor.
En primer lugar, proporcione solo el código que se necesita para resolver su problema. Acerca del problema: está sucediendo porque vuelve a renderizar el componente con setDescription , setIdentity , setEnteredText y setEnteredId en buttonHandler() . Y el valor de la descripción no se establece de inmediato. Como solución, puede hacer algo como:
function buttonHandler() { console.log("description :" + enteredText); console.log("identity :" + enteredId); setEnteredText(""); setEnteredId(""); }No hay necesidad de usar más variables.
Prueba algo así en su lugar:
function buttonHandler() { setDescription(enteredText); setIdentity(enteredId); } useEffect(() => { console.log("description :" + description); console.log("identity :" + identity); setEnteredText(""); setEnteredId(""); }, [description, identity]);useEffect debe activarse dos veces, ya que tanto la descripción como la identidad están en la matriz de dependencia, pero es un buen comienzo para administrar el comportamiento asíncrono de useState.