Estoy tratando de cargar cada cadena de una matriz de cadenas en una etiqueta html <li> pasando esta matriz a través de accesorios:
<CardItem src='https://static.news...koinex-banner.png' text='my text' label='Adventure' path='/products' description={["someText1", "someText2", "someText3", "someText4"]} /> function CardItem(props) { return ( <> <li className='cards__item'> <Link className='cards__item__link' to={props.path}> <figure className='cards__item__pic-wrap' data-category={props.label}> <img className='cards__item__img' alt='Travel Image' src={props.src} /> </figure> <div className='cards__item__info'> <h5 className='cards__item__text'>{props.text}</h5> </div> <CardDescription description={props.description} /> </Link> </li> </> ); } export default CardItem; function CardDescription(props) { return ( <div> <ul> <li>{props.description[0]} </li> </ul> </div> ) } export default CardDescriptiony estoy recibiendo
TypeError: no se pueden leer las propiedades de undefined (leyendo '0')
No estoy seguro de por qué props.description prop regresa indefinido.
Además, este TypeError parece estar ocurriendo solo con props.description prop.
Su código está mal escrito CardDescrition a CardDescription
Probar:
{props.description ? <CardDescription description={props.description} /> : ''}y en la descripción:
function CardDescription(props) { return ( <div> <ul> {props.description.map(des => <li>des</li>)} </ul> </div> ) }encuentre el repositorio mínimo que creé:
https://github.com/snake-py/so-help-react-card
Explicación:
Trato de explicar a partir de lo que entiendo lo que está pasando allí.
Cuando Carditems se monta, parece que, aunque codificas los valores de forma rígida, no se pasan en el renderizado inicial. Por lo tanto, el ternario verifica si los accesorios incluyen la matriz de description .
Ahora estoy adivinando por qué es eso:
Quizás porque están dentro de un componente contenedor de Link . Si elimina el componente Link , el código debería funcionar sin la verificación inicial.
bueno, probablemente se deba a que durante el montaje de los tres, la propiedad de descripción podría no estar definida, podría evitar este error haciendo esto props?.description[0] , también si desea representar todos los valores en la matriz dentro del componente CardDescrition podrías hacer esto
props?.description.map((item) => (<li>{item}</li>))