Estoy haciendo un proyecto de ecommrece, en la barra de búsqueda estoy mostrando casillas de verificación con categorías de la API, todas ellas tienen un valor activo == verdadero de forma predeterminada. Así es como los estoy mapeando:
{categories.map((category) => { return ( <> <input type="checkbox" onClick={() => handleCheckbox(category)} defaultChecked={category.active} key={category.name} /> <label style={{marginLeft:"5px"}} htmlFor={category.name}>{category.name}</label><br/> </> ) })}Luego ejecuto esta función para cambiar la propiedad category.active de verdadero a falso, cuando se hace clic en la casilla de verificación exacta, entonces quiero actualizar este objeto usando useState
const handleCheckbox = (category) => { let tempCategory = category if (tempCategory.active == true) { tempCategory.active = false; } else { tempCategory.active = true; } setCategories({...categories, [tempCategory.id]: tempCategory}) console.log(category.active) }Desafortunadamente, cuando hago clic en la casilla de verificación, recibo un error de React:
TypeError: categories.map is not a function Y apunta a categorías.mapa, no tengo idea de cómo solucionarlo. Todo lo que quiero es actualizar un objeto específico en la matriz de categories .
Creo que sus categorías comienzan su vida como una matriz de objetos de categoría, y tenía la intención de setCategories en una matriz, pero en lugar de eso, la está configurando en un objeto.
También debe asegurarse de no duplicar tempCategory . algo como esto:
setCategories([ ...categories.filter(x => x.id != tempCategory.id), tempCategory ]); Sin embargo, esto reordenará sus categorías, colocando tempCategory al final, por lo que otra opción es dividir la matriz correctamente.
const tmpIdx = categories.findIndex(x => x.id == tempCategory.id); setCategories([ ...categories.slice(0,tmpIdx), tempCategory, ...categories.slice(tmpIdx+1), ]); Otra opción es hacer que sus categories sean un objeto y usar Object.values(categories).map(...) pero esto hace que ordenar sus categorías sea más difícil, ya que no hay un orden fijo de claves/valores de objeto como lo hay con una matriz.