const mongoose = require("mongoose") const productSchema = mongoose.Schema( { title:{ type: String, required: true, unique: true }, description:{ type: String, required: true }, img:{ type: String, required: true }, categories:{ type: Array }, size:{ type: String }, color:{ type: String }, price:{ type: Number, required: true }, inStock:{ type: Boolean, default: true } }, {timeStamps: true} ) module.exports = mongoose.model("Product", productSchema)Tengo un problema al mapear las propiedades del producto, como el color y el tamaño.
Los datos del producto se reciben del backend mediante Axios, pero useEffect no se vuelve a representar y los objetos del producto, como el color y el tamaño, no están presentes en la primera carga del componente. No están definidos debido a que .map no es una función que muestra un error
const location = useLocation() const id = location.pathname.split("/")[2] const [product, setProduct] = useState({}) useEffect(() =>{ console.log("useEffect") const getProduct = async ()=>{ try{ const res = await publicReq.get("/products/find/" + id) console.log(res.data) setProduct(res.data) console.log("useEffect worked") console.log(product) console.log(product.color) console.log(product.size) console.log(product.title) }catch (err){ console.log(err) console.log("not running") } } getProduct() }, [id]) <Filter> <FilterTitle>{console.log("running")}Color</FilterTitle> {product.color?.map((c) =>{ console.log("lo running") return( <Color color={c} key={c} onClick={() => setCol(c)}/> ) })} </Filter>.map solo funciona en matrices. Compruebe si los datos de su product.color están en forma de matriz. Una manera fácil de verificar es haciendo console.log(Array.isArray(products.color)) Además, no estaría de más inicializar el estado de su producto como la forma de los datos que está recibiendo, por lo que no hay errores de tipo o los errores ocurren en el montaje de un componente. A continuación se muestra un ejemplo.
const [product, setProduct] = useState({size: "", title: "",color: []}) function isArray(arr){ return Array.isArray(arr) } console.log(isArray([])) console.log(isArray([1,2,3])) console.log(isArray("no")) console.log(isArray("[]"))(Resuelto) El error es que no inicialicé product.color en el tipo Array y la función .map() solo funciona en Arrays.
color:{tipo: Matriz},
este debería ser el código de color en mongoDB Schema