Soy nuevo en el desarrollo web y en React, y le pediría amablemente ayuda relacionada con mi proyecto actual.
Estoy accediendo a datos de un archivo local e intento mostrarlos al hacer clic. Funciona bien si no toco nada relacionado con el estilo, pero cada vez que agrego algo de CSS, mi código se rompe.
Supongo que cualquier pregunta es similar a la que se hace aquí , pero esta solución no me funciona. ¡Ni siquiera puedo agregar una etiqueta div! ¿Alguien puede sugerir qué hacer? ¡Gracias!
import { withRouter } from "react-router-dom";
import "../womenInfo.css";
function WomanDetails({ routeProps, data }) {
const foundCard = () => {
return data.find((card) => card.id === +routeProps.match.params.id);
};
return (
<div className="woman-page">
<>
<img className="info-img" src={foundCard().image} alt="" />
</>
<>
<h3 className="women-title">{foundCard().title}</h3>
</>
<>
<p className="women-years">{foundCard().years}</p>
</>
<>
<p className="women-nationality">{foundCard().nationality}</p>
</>
<>
<p className="women-contribution">{foundCard().contribution}</p>
</>
</div>
);
}
export default withRouter(WomanDetails);
Array.prototype.find puede potencialmente devolver undefined si ningún elemento en la matriz coincide.
El
find()método devuelve el valor del primer elemento en la matriz proporcionada que satisface la función de prueba proporcionada. Si ningún valor satisface la función de prueba,undefinedse devuelve.
Si foundCard()devuelve undefined foundCard().image, arrojará el TypeError: Cannot read property 'image' of undefined”error que está viendo.
Simplifique foundCardde función a una expresión de asignación. Verifique el foundCardvalor y, si es falsey (indefinido, nulo, falso), regrese nullantes para indicar que no hay nada que representar.
Los React Fragments también solo son necesarios cuando se devuelve más de un nodo y no desea enturbiar el DOM con div"contenedores". No necesitan rodear cada elemento.
function WomanDetails({ routeProps, data }) {
const foundCard = data.find((card) => card.id === +routeProps.match.params.id);
if (!foundCard) return null;
return (
<div className="woman-page">
<img className="info-img" src={foundCard.image} alt="" />
<h3 className="women-title">{foundCard.title}</h3>
<p className="women-years">{foundCard.years}</p>
<p className="women-nationality">{foundCard.nationality}</p>
<p className="women-contribution">{foundCard.contribution}</p>
</div>
);
}
export default withRouter(WomanDetails);
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras