¿Por qué no se ejecuta useEffect cuando se cambia la clasificación? Solo quiero que se ejecute cuando sorting.options se ajuste, pero por alguna razón, cuando agrego opciones a sorting.options, useEffect no se ejecutará; sin embargo, cuando solo tengo "clasificación", funciona perfectamente aunque solo se cambien las opciones en handleChange? No quiero tener solo clasificación allí porque no quiero que useEffect se ejecute cuando se cambia sorting.value, por ejemplo.
const handleChange=index=>event=>{ let newOptions = sorting.options newOptions[index]["value"]=event.target.value setSorting((prevState)=>({ ...prevState, options:newOptions })) console.log("sorting changed") } useEffect(()=>{ console.log("Change happend") },[sorting.options])//This works perfectly fine when only sorting is there, but when i put in sorting.options nothing happensComo dijo Quentin, intenta
let newOptions = sorting.options.slice(0)Para copiar la matriz de opciones en lugar de mutarla
El problema es que mantienes la referencia del objeto original a lo largo de diferentes renders. Solo reemplaza por una copia
import React, { useState, useEffect } from "react"; export default function Home() { const [sorting, setSorting] = useState({ options: { 1: { value: 2 } }, email: "vapa@dieheli.us", }); const handleChange = (index) => (event) => { let newOptions = sorting.options; // Here you are getting the reference of sorting.opions which is constant between renders // let newOptions = { ...sorting.options }; // Just replace previous line for a copy. newOptions[index]["value"] = event.target.value; // Then you mutated the same object setSorting((prevState) => ({ // setSorting creates a new object reference ...prevState, options: newOptions, // but options references never changed })); }; useEffect(() => { console.log("Change happend", sorting); }, [sorting.options]); return ( <div> Home <input onChange={handleChange(1)} /> </div> ); }