React JS fetching data (error: Cannot read properties of undefined)

i am just trying to learn JavaScript. I have to create a web application for school. Now i am trying to fetch data from a self written api. The backend is written with express, the frontend with JavaScript. I have got a overview page, where all products are shown. After clicking on the detail button, the user should be able to view the details of the selected product. For this i use this code.

import React, { useState, useEffect } from "react";
import "./Articles.css";

function ArticleDetail({ match }) {
  useEffect(() => {
  }, []);

  const [article, setArticle] = useState([]);

  async function fetchArticle() {
    try {
      const response = await fetch(
      const article = await response.json();
      return article;
    } catch (error) {

  return (

export default ArticleDetail;

If i run this code and don’t refresh the page by myself, the correct value (pk_article_nr) is shown. If i refresh the browser manually there is this error

TypeError: Cannot read properties of undefined (reading ‘pk_article_nr’)

This data are shown in the console:

{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`

Could you please help me? I haven’t found anything that helps me. Maybe i just searched for the wrong thing.

Thank you,

>Solution :

You should change




Leave a Reply