En mi aplicación web Nextjs, una de mis páginas tiene dos funciones que permiten agregar o eliminar correos electrónicos de una matriz usando useState() de nextjs.
const [invites, setInvites] = useState([]) // other code const lmao = () => { console.log(invites) } const addEmail = async (email) => { if(!invites.includes(email)) { setInvites([...invites, email]) } lmao() } const removeEmail = async (email) => { let tempArray = invites const index = tempArray.indexOf(email) if(index > -1) { tempArray.splice(index, 1) } setInvites(tempArray) lmao() } La función addEmail da como resultado con éxito una representación del componente y, cuando se ejecuta, actualizará visiblemente la página con el correo electrónico agregado. Sin embargo, la función removeEmail no puede volver a procesar la página. Utilicé la función lmao() para ver que las invites se cambiaban según era necesario, la página simplemente no se volvía a mostrar para mostrar el cambio.
También miré ¿Por qué setState ([... arr]) causa una nueva representación pero setState (arr) no? , y no responde a mi pregunta porque en mi caso, el elemento pasado al mutador no es === a su valor anterior, a menos que me falte algo. Si la pregunta vinculada explica mi problema, ¿podría alguien dar más detalles sobre por qué setInvites(tempArray) no provoca una nueva representación a pesar de que cambia el valor del estado y cómo cambiaría mi código para hacerlo?
Supongo que tempArray sigue siendo la misma matriz, es decir, la misma referencia. Pondría setInvites([...tempArray]) en lugar de setInvites(tempArray) en removeEmail
tempArray es otra referencia a la misma matriz, es decir, es ===
let foo = ['a', 1, 'b'] let bar = foo bar.splice(1, 1) console.log(foo, bar, foo===bar) // [ 'a', 'b' ] [ 'a', 'b' ] truePuedes clonar tu matriz:
let bar = [...foo]O use algún tipo de eliminación que no mute la matriz original:
let bar = foo.filter(f => f !== 1)En ambos casos obtendrás
console.log(foo, bar, foo===bar) // [ 'a', 1, 'b' ] [ 'a', 'b' ] false