React JS 获取数据（错误：无法读取未定义的属性）

Question

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

\n

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

\n

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

\n

\n

类型错误：无法读取未定义的属性（读取“pk_article_nr”）

\n

\n

该数据显示在控制台中：

\n

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

\n

请你帮助我好吗？我还没有找到任何对我有帮助的东西。也许我只是寻找错误的东西。

\n

谢谢你，\n麦克斯

\n

Answer 1

你应该改变

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

到

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

出现这种情况的原因：

React想要在挂载之前访问该属性，而该属性还没有收到任何内容