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

Question

我只是想学习 JavaScript。我必须为学校创建一个网络应用程序。现在我正在尝试从自己编写的 api 中获取数据。后端用express写，前端用JavaScript。我有一个概览页面，其中显示了所有产品。单击详细信息按钮后，用户应该能够查看所选产品的详细信息。为此，我使用此代码。

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;

如果我运行此代码并且不自己刷新页面，则会显示正确的值 (pk_article_nr)。如果我手动刷新浏览器就会出现这个错误

TypeError: Cannot read properties of undefined (reading 'pk_article_nr')

此数据显示在控制台中：

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

你能帮帮我吗？我还没有找到任何可以帮助我的东西。可能是我搜索错了。

谢谢，最大值

Answer 1

你应该改变

<p>{article.articles.pk_article_nr}</p>

至

<p>{article?.articles?.pk_article_nr}</p>

发生这种情况的原因：

React wants to access the property before mounting, while the property has not yet received any content

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

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

javascript

reactjs

fetch-api