0
277
ViewsAcceder a las propiedades de un objeto en una matriz en React
Así que he estado tratando de resolver esto por un tiempo y realmente espero que alguien pueda ayudar
Estoy creando una matriz y almacenando una lista de objetos en ella de esta manera.
const heroPost = postList.filter(post => post.hero);cuando registro heroPost en la consola, obtengo el siguiente resultado.
Estoy tratando de acceder a la propiedad url en este objeto de la siguiente manera.
console.log(heroPost[0].url);Pero sigo recibiendo este error indefinido.
No estoy muy seguro de lo que está yendo mal aquí. Estoy usando una función asíncrona para obtener datos de una base de datos que supongo que podría ser un problema, pero estoy generando datos de 'postList' en jsx que he usado para recuperar datos en 'heroPost', así que ' No estoy seguro de cómo puede ser el problema. Alguna ayuda o ideas serían muy apreciadas.
¡Gracias!
Editar: esta es la parte del componente que usa la 'postList' para representar datos. Que funciona bien
<div className="posts-container"> {postList.map((post) => ( <div key={post.id} className="post"> <h3 className="post-title">{post.title}</h3> <div className="post-info"> <p className="author">{post.author}</p> <p className="timestamp">{post.author}</p> </div> <p className="content">{post.body}</p> <img src={post.url} alt="" /> </div> ))} </div>Lo que estoy tratando de hacer ahora es usar heroPost para representar datos en la sección de héroe de la página de la siguiente manera, pero aún arroja el error indefinido.
<div className="hero"> <img src={heroPost[0].url} alt="" /> </div>Gracias por todos los comentarios y respuestas, ahora entiendo el problema. Todavía no entiendo por qué funciona en la instancia 'postList' y no aquí. ¿Hay alguna manera de que pueda hacer esto sin intentar ir directamente al archivo donde recupero los datos y los agrego a esa función?
2 answers
Answer question0
Respuesta simple: obtienes ese error porque no está definido
Si observa su console.log , puede ver una matriz vacía en la primera línea
Eso es porque cuando renderizas por primera vez tu componente postList es una matriz vacía.
Solo después de obtener sus datos y completar su matriz, puede acceder a ellos
puedes intentar hacer esto
useEffect(() => { setHeroPost(postList.find(p => p.hero)) }, [postList])0
Dado que está utilizando una función asíncrona para obtener los datos, cuando el componente que consiste en este código se renderiza por primera vez, no tendrá los datos que necesita para renderizar el componente.
Por lo tanto, 'indefinido'
Puede resolver este problema renderizando condicionalmente el componente. Es decir, renderice el componente solo después de que los datos estén disponibles.
Como no ha compartido el código del componente, puede consultar este documento de reacción para obtener ayuda con el problema: Representación condicional
Editar: lo siguiente es cómo funcionaría la condición. Esto supone que postList es una variable de estado y se activará una nueva representación cuando se cambie su valor: 
Para el segundo fragmento que compartiste:
<div className="hero"> {(heroPost && heroPost[0])?<img src={heroPost[0].url} alt="" />:'No data'} </div>