Estoy trabajando en esta tarea donde necesito hacer lo siguiente: tengo este objeto pasado por referencia de 4 componentes
const initialStateSubjects = { "1":{ "name": "math", "selected": true} "2":{ "name": "English", "selected": true} } const Subjects = { "1":{ "name": "math", "selected": false} "2":{ "name": "English", "selected": true} } const [initialState, setInitialState] = useState(initialStateSubjects) const [changedState, setChangedState] = useState(initialStateSubjects) //this is the way I'm filtering but it's not working because it's comparing two identical objects const changedSubjects = Object.keys(changedState) .filter(key => initialState[key]?.selected !== changedState[key]?.selected .map(key => console.log(initialState[key]?.name)) Como puede ver, ambos necesitan que se les pase el mismo objeto, que es initialStateSubjects La mayor parte de la lógica se realiza con el estado cambiado, y solo configuro el inicial una vez en initialState , pero independientemente, tanto el estado changedState como el estado cambiado se cambian en el Mismo tiempo. Quiero usar el valor inicial de Estado inicial para comparar la diferencia y devolver el nombre de los sujetos que cambiaron los valores selected . He intentado hacer esto en la consola y funciona de manera brillante, pero cuando lo hago en React me quedo atascado con esto. Probé el operador de propagación para hacer una copia superficial y usé una biblioteca para hacer un clon profundo, pero aún muta el objeto inicial. Si piensa en una forma diferente de comparar el estado inicial sin crear otro estado, eso también funcionaría para mí porque todo lo que quiero es devolver los que cambiaron al hacer clic en un botón desde su estado inicial original. Muchas gracias de antemano!
No estoy seguro de cuál es el requisito exacto ya que no puede proporcionar el código completo. Pero aquí hay una implementación funcional para un menú desplegable simple que podría ayudarlo. Si necesita una copia del estado inicial solo para comparar, entonces en ese caso no necesita mantener 2 copias. Aquí se puede utilizar una implementación de un solo estado.
import React from "react"; const initialStateSubjects = { "1": { name: "Math", selected: false }, "2": { name: "English", selected: false } }; export default function App() { const [initialState, setInitialState] = React.useState(initialStateSubjects); const handleChange = (e) => { setInitialState((prevState) => { return Object.values(prevState).map((val) => { val.name === e.target.value ? (val.selected = true) : (val.selected = false); return val; }); }); console.log(initialState); }; return ( <div> <select onChange={handleChange}> {Object.keys(initialState).map((sub) => ( <option key={sub}>{initialState[sub].name}</option> ))} </select> </div> ); }