Solo estoy tratando de aprender JavaScript. Tengo que crear una aplicación web para la escuela. Ahora estoy tratando de obtener datos de una API escrita por mí mismo. El backend está escrito con express, el frontend con JavaScript. Tengo una página de resumen, donde se muestran todos los productos. Después de hacer clic en el botón de detalles, el usuario debería poder ver los detalles del producto seleccionado. Para esto uso este código.

 import React, { useState, useEffect } from "react"; import "./Articles.css"; function ArticleDetail({ match }) { useEffect(() => { fetchArticle(); }, []); const [article, setArticle] = useState([]); async function fetchArticle() { try { const response = await fetch( `http://localhost:8000/api/articles/${match.params.id}` ); const article = await response.json(); //console.log(data.results); console.log(article); setArticle(article); return article; } catch (error) { console.error(error); } } return ( <div> <p>TEST</p> <p>{article.articles.pk_article_nr}</p> <p>TEST</p> </div> ); } export default ArticleDetail;

Si ejecuto este código y no actualizo la página por mi cuenta, se muestra el valor correcto (pk_article_nr). Si actualizo el navegador manualmente, aparece este error.

TypeError: no se pueden leer las propiedades de undefined (leyendo 'pk_article_nr')

Estos datos se muestran en la consola:

 {articles: {…}} articles: article_description: "lorem ipsum" article_expiretimestamp: "2022-01-15 18:52:27" article_picture: null article_timestamp: "2022-01-15 18:37:27" article_title: "Test 4" bid_amount: 80 fk_article_nr: 4 fk_user_userid: null pk_article_nr: 4 pk_bid_id: 8`

¿Me podría ayudar? No he encontrado nada que me ayude. Tal vez acabo de buscar la cosa equivocada.

gracias, max