Estoy tratando de mostrar una respuesta exitosa una vez que los usuarios se registran sin errores. Hay un objeto reductor de redux de errores que almacena los errores que provienen del back-end. Y se supone que la if statement da la respuesta de éxito si el objeto de errores está vacío, muestra los errores si hay alguno, también registra a los usuarios si no hay ninguno, pero no parece ejecutar if(props.errors === {}) bloque.
function onSubmit(e) { e.preventDefault(); const newUser = { fname: fname, lname: lname, phone: phone, email: email, password: password, }; dispatch(register(newUser)); if (props.errors === {}) { //This block is not executed setSnackOpen(true); setFname(''); setLname(''); setEmail(''); setPhone(''); setPassword(''); } console.log('errors :' + props.errors); //logs 'errors : [object, object]' }El reductor de errores:
import { GET_ERRORS } from '../actionTypes/actionTypes'; const initialState = { }; export const errorReducer = (state = initialState, action) => { switch (action.type) { case GET_ERRORS: return action.payload default: return initialState; } };Debido a que está comparando props.errors con {} nuevo objeto vacío, aunque ambos están vacíos, apuntan a una ubicación de memoria diferente, por lo que si la condición devolverá falso para la declaración if(props.errors === {})
Puede verificar la longitud de los props.errors como
if(!Object.keys(props.errors).length)Este if (props.errors === {}) nunca sería true , ya que en realidad está comparando sus references , que no son las mismas.
Y haría lo siguiente, y la ventaja es que funcionaría tanto para cuando no hay ninguna clave, como para cuando las hay, pero sus valores están vacíos.
if (!Object.keys(props.errors).some((k) => props.errors[k])) Es útil cuando considera {firstNameError:"", lastNameError:"" } y {} como vacíos. Vea el fragmento a continuación:
const objOne={firstNameError:"", lastNameError:"" }; const objTwo= {}; if(!Object.keys(objOne).length){ console.log("First console prints empty") } if (!Object.keys(objOne).some((k) => objOne[k])){ console.log("Second console prints empty") } if(!Object.keys(objTwo).length){ console.log("First console prints empty") } if (!Object.keys(objTwo).some((k) => objTwo[k])){ console.log("Second console prints empty") }Cada vez que declare un nuevo objeto (vacío o no), se creará con una nueva referencia. puede ejecutar el siguiente código en su consola de desarrollo. todos ellos darán el resultado falso. Porque obj1 es un objeto vacío diferente a obj2.
var obj1 = {} var obj2 = {} console.log(obj1 === {}) console.log(obj2 === {}) console.log(obj1 === obj2) false false falseUna forma de verificar si un objeto está vacío es esta:
Object.keys(obj1)Esto le dará una matriz de valores clave del objeto. por lo tanto, puede verificar la longitud de la matriz.
const keysArray = Object.keys(obj1) if (keysArray.length === 0){ // do something }