小编max*_*max的帖子

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

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

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

\n

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

\n

该数据显示在控制台中：

{articles: {\xe2\x80\xa6}}\n …