Estoy tratando de usar un ciclo forEach para devolver un componente para cada elemento en una matriz. Sin embargo, cuando se carga mi aplicación de reacción, simplemente devuelve [Objeto] una y otra vez. ¿Por qué es esto y cómo lo soluciono?
Aquí está el código:
const ProductList = () => { let product_image; let product_heading; let product_listbox_options = ""; info.data.products.edges.forEach((edge) => { console.log(edge); const product = edge.node; product_heading = edge.node.title; if ( product.media !== undefined && product.media.edges !== undefined && product.media.length > 0 ) { product.media.edges.forEach((media) => { if (media.node.mediaContentType === "IMAGE") { product_image = ( <Thumbnail source={media.node.image.originalSrc} alt={product.title} /> ); } }); } product_listbox_options += ( <Listbox.Option> <Heading>{product_heading}</Heading> {product_image} </Listbox.Option> ); }); return product_listbox_options; };que haces aqui
product_listbox_options += ( <Listbox.Option> <Heading>{product_heading}</Heading> {product_image} </Listbox.Option> );es que está agregando un valor de cadena vacío a un componente de reacción que da como resultado [Objeto].
Como dijo @tieulinh, debe usar .map() en lugar de .forEach() si desea devolver una lista/matriz de componentes que pueden ser representados por reaccionar. Entonces su componente se vuelve así:
const ProductList = () => { let product_image; let product_heading; return ( <> {info.data.products.edges.map((edge, index) => { const product = edge.node; product_heading = edge.node.title; if ( product.media !== undefined && product.media.edges !== undefined && product.media.length > 0 ) { product.media.edges.forEach((media) => { if (media.node.mediaContentType === "IMAGE") { product_image = ( <Thumbnail source={media.node.image.originalSrc} alt={product.title} /> ); } }); } return ( //Change this key to something meaningful from your edge object <Listbox.Option key={index}> <Heading>{product_heading}</Heading> {product_image} </Listbox.Option> ); })} </> ); };Intenta hacerlo de esta manera:
console.log(JSON.stringify(edge, null, 2))ReactJS no funciona así
Puede usar el método de mapa en lugar de forEach