Quiero actualizar un objeto de estado userInfo que contiene una matriz llamada trabajo que es una matriz de objetos
La información de usuario de mi objeto de base de datos se ve así
{ "_id":"61a6a1d64707c03465eae052", "fullName": "Md Nurul Islam", "works": [ { "isEditing": false, "_id": "61a6a1d64707c03465eae053", "company": "Amazon Logistics", "position": "Sortation Associate", "isCurrent": true }, { "isEditing": false, "_id":"61a6a1d64707c03465eae054", "company": "The Rani Indian Takeway", "position": "Customer Service Assistant", "isCurrent": false, } ] }Pero no quiero actualizar la base de datos, solo quiero actualizar la información de usuario del estado en la interfaz para ir a editar el estado de ánimo, para esto, cuando el usuario haga clic en editar junto a la sección de trabajo, las propiedades están editando se alternarán.
A continuación se muestra mi código
const [userInfo, setUserInfo] = useState(user); const workToggleHandler = (work) => { setUserInfo((prev) => { prev.works.map((p) => { if (p._id === work._id) { p.isEditing = !p.isEditing; } return p; }); return prev; });Con este código, mi objeto de estado se actualiza, pero mis componentes no se vuelven a renderizar.
puede poner en useEffect cuando se actualice un estado particular, entonces ese efecto llamará
useEffect(()=>{ your code will go here }[userInfo]),React no mira los datos del objeto sino el puntero del objeto. Dado que esto no se cambia (solo se edita "anterior", no hay ningún objeto nuevo con una nueva dirección de objeto), no se vuelve a representar. Una solución sería copiar el objeto.
let newUserInfo = Object.assign({}, prev); newUserInfo.works.map((p) => { if (p._id === work._id) { p.isEditing = !p.isEditing; } return p; }); return newUserInfo;Descargo de responsabilidad: tal vez sea necesaria una copia profunda....
Acabo de cambiar mi código en la función workToggleHandler y funciona completamente como quiero. Debajo de mi código
const [userInfo, setUserInfo] = useState(user); const workToggleHandler = (work) => { setUserInfo({ ...userInfo, works: userInfo.works.map((p) => { if (p._id === work._id) { p.isEditing = !p.isEditing; } return p; }), }); };