0
368
ViewsCómo usar la representación condicional dentro del mapa en React
Tengo una página de reacción que muestra una lista de productos que se devuelven desde una API de GraphQL. Una vez que se devuelven los productos, los almaceno en un estado y luego los renderizo. ¿Cómo renderizo solo productos que cumplen ciertas condiciones?
En este momento, estoy mapeando los productos y renderizando cada uno. Esto está funcionando correctamente. Pero si trato de usar declaraciones condicionales, obtengo errores en mi IDE. Este es el código que tengo actualmente. Esto está funcionando actualmente:
async function contactAPI() { return await axios({ url: 'https://graphqlexample.com/api/products', method: 'post', data: { query: ` QUERY GOES HERE ` } }) } function App() { const [products, setProducts] = useState([]); useEffect(() => { async function getData() { const res = await contactAPI(); setProducts(res.data.data.products); } getData(); }, []); return ( <div> <div> {products.map(p => ( <div> <ProductCard productName={p.productName} /> </div> ))} </div> </div> ); } Necesito verificar p.productName para ver si cumple con ciertas condiciones y, si las cumple, renderizarlo. Si no, no renderice. Intenté usar diferentes condicionales dentro del map , pero sigo recibiendo errores.
3 answers
Answer question0
Como ejemplo, puede devolver el JSX si cumple con ciertos criterios como:
Nota: Para propósitos de demostración, he usado el método includes . Puede especificar la condición
(<div><ProductCard productName={p.productName} /></div>) y solo se renderizará si la primera condición es true
<div> {products.map((p) => ( p.productName.includes("free") && (<div><ProductCard productName={p.productName} /></div>) ))} </div> 
export default function App() { const arr = [1, 2, 3, 4, 5]; return ( <div> {arr.map((n) => { return n % 2 === 0 && <div key={n}>{n}</div>; })} </div> ); }0
map siempre devolverá una matriz de la misma longitud, por lo que devolverá algunos elementos vacíos según la condición que no sea óptima.
En su lugar, filter los datos primero y luego map sobre la matriz devuelta. De esa manera, solo está mapeando los datos que necesita mostrar.
const { useState } = React; function App({ data }) { const [ products, setProducts ] = useState(data); // In this example we take the list of products in // state and return a new array of only those products // that aren't soap. We then `map` over that array in our // component render function getFilteredProducts() { return products.filter(product => { const name = product.productName.toLowerCase(); return !name.includes('soap'); }); } // Get an array of filtered products and then `map` over it // to produce the product cards return ( <div> {getFilteredProducts().map(product => { return ( <ProductCard key={product.id} id={product.id} name={product.productName} /> ); })} </div> ); }; function ProductCard({ id, name}) { return <div>{id}: {name}</div>; } const data=[{id:1,productName:"Blue Soap"},{id:2,productName:"Beans"},{id:3,productName:"Green Soap"},{id:4,productName:"Sponge"},{id:5,productName:"Chicken"}]; ReactDOM.render( <App data={data} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>0
{ products.map(id => { return condition == true ? <div> <ProductCard productName={p.productName} /> </div> : <div></div> })}