hola a todos buenas noches,
Tengo una matriz de objetos establecidos en el estado y me gustaría cambiar algún objeto en la matriz.
así que aquí está mi matriz, puedes ver:
const [CategoriesArr, setCategoriesArr] = useState([ { image: anime, nameByCategories: "Aninate", allCard: [ silverCard, blackCard ], }, { image: vacation, nameByCategories: "Vacation", allCard: [ blackCard, silverCard ], },]) Traté de cambiar allCard a: allCard:blackCard, blackCard
de esta manera:
setCategoriesArr([ { ...CategoriesArr[0], allCard: [ silverCard, silverCard ] }])el problema es que después de setState obtengo una nueva matriz con los cambios que quiero y también la última matriz, por lo que significa así
{ image: anime, nameByCategories: "Aninate", allCard: [ blackCard, blackCard ], }, { image: vacation, nameByCategories: "Aninate", allCard: [ silverCard, blackCard ], }, { image: anime, nameByCategories: "vacations", allCard: [ blackCard, silverCard ], },Me gustaría entender que puedo obtener una nueva matriz exactamente así:
const [CategoriesArr, setCategoriesArr] = useState([ { image: anime, nameByCategories: "Aninate", allCard: [ silverCard, blackCard ], }, { image: vacation, nameByCategories: "Vacation", allCard: [ blackCard, blackCard ], },])súplicas
espero que me ayuden :)
Hay una forma sencilla de hacerlo.
const updateCategoryList = (id) => { const newCategories = CategoriesArr.map(cate => { if (cate.nameByCategories === id) { // <= id can be "Aninate" or anything you want cate.allCard[silverCard, silverCard] return cate; } }) setCategoriesArr(newCategories) }puede usar esta función updateCategory con el controlador de eventos o con otras funciones o componentes que desee.
¡Espero que encuentres una solución!
El problema es que el método setter (del gancho useState ) no es como setState en los componentes de clase que fusionan los cambios en el estado existente.
Al usar la función de devolución de llamada del setter, le brinda el estado previousState para fusionar los nuevos cambios y regresar (en su caso, el cambio es solo una propiedad del primer elemento en el estado).
Este también funcionaría.
setCategoriesArr((prevValue) => { return prevValue.map((item, itemIndex) => { if (itemIndex === 0) { return { ...item, allCard: ["silverCard", "silverCard"] }; } else { return item; } }); });Zona de pruebas de código => https://codesandbox.io/s/runtime-shadow-2bbxh?file=/src/App.js