0
212
Views¿Cómo mostrar un mensaje dentro de un div vacío cuando un componente no se representa en él?
Tengo un div dentro del cual estoy renderizando componentes de tarjetas dinámicas (SearchRes):
<div className="search-res"> {games.filter(game => (game.background_image !== null)&&(game.ratings_count>38)).map(game=> <SearchRes key={game.name} title={game.name} rating={game.metacritic===null?<MdGamepad/>:game.metacritic} genre={game.genres.map(genre=>genre.name+" ")} imglnk={(game.background_image===null)?"":game.background_image} gameid={game.id} slug={game.slug} plat={game.parent_platforms} /> )} </div> Cuando las tarjetas no se procesan (cuando no pasan las condiciones del filtro), obtengo un espacio en blanco. Quiero mostrar algo como que no results found cuando sucede tal cosa, ¿cómo puedo implementar esto? Actualmente estoy usando CSS para implementarlo:
.search-res:empty::before { content: "No data";} pero claramente esto no es viable ya que el mensaje es visible cuando la búsqueda ni siquiera se inicia: 
3 answers
Answer question0
Si entiendo su pregunta, desea generar condicionalmente un respaldo "Sin datos" solo después de que haya obtenido los datos y no haya nada que procesar.
Agregue un estado de carga y represente condicionalmente un indicador de carga.
Filtre los
gamesy en el renderizado verifique que haya una longitud de matriz (es decir, algo para mapear) y renderice condicionalmente la matriz o el texto alternativo si hay un término de búsqueda actual.
Código
const [searchLoaded, setSearchLoaded] = React.useState(false); // in search handler // toggle searchLoaded false when initiating a search // toggle searchLoaded true when search completes const results = games.filter( game => game.background_image !== null && game.ratings_count > 38 ); <div className="search-res"> {results.length ? results.map(game => ( <SearchRes key={game.name} title={game.name} rating={game.metacritic === null ? <MdGamepad/> : game.metacritic} genre={game.genres.map(({ name }) => name).join(" ")} imglnk={game.background_image === null ? "" : game.background_image} gameid={game.id} slug={game.slug} plat={game.parent_platforms} /> )) : searchLoaded && "No Data" } </div>0
Sugeriría filtrar la matriz primero, según las condiciones y luego verificar si la matriz tiene una longitud, es decir arr.length !== 0 y, si ese es el caso, luego asignar los resultados de la matriz al card component . Y si no, muestra el mensaje de que no se encontraron datos. Tendría que usar if/else o el ternary operator .
Gracias😊
0
si está utilizando un filtro solo para acondicionamiento, entonces no hay necesidad de un filtro; en su lugar, puede usar una representación condicional como esta:
<div className="search-res"> {games.map(game=> {(game.background_image !== null && game.ratings_count>38) ? <SearchRes key={game.name} title={game.name} rating={game.metacritic===null?<MdGamepad/>:game.metacritic} genre={game.genres.map(genre=>genre.name+" ")} imglnk={(game.background_image===null)?"":game.background_image} gameid={game.id} slug={game.slug} plat={game.parent_platforms} /> : "NO RESULTS FOUND"} )} </div>