reactjs - React：无法将 id 传递给端点以显示图像

问题描述

我对反应很陌生，并且有一个我不确定是什么问题的问题。我有一个外部 api，其端点包含文章，另一个端点用于获取与文章相关的图像。我想同时显示文章和图像，但无法显示图像。

流程如下：

首先，我找到带有文章 api 端点和文章 ID 的文章。它看起来像这样：

 const { itemId } = useParams()
    const [article, setArticle] = useState([])
    const [articleImg, setArticleImg] = useState('')
    const [fileId, setFileId] = useState('')

 useEffect(() => {
    fetch(`https://api.fortnox.se/3/articles/${itemId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'Access-Token': accessToken,
        'Client-Secret': clientSecret
      }
    })
      .then((res) => res.json())
      .then((data) => {
        console.log(data)
        setArticle(data.Article)
        console.log(data)
      })
  }, [itemId])

为了获得该文章的图像，我必须通过针对 ArticleFileConnections 端点搜索文章编号来找到 FileId：（文档）

useEffect(() => {
    fetch(`https://api.fortnox.se/3/articlefileconnections/?articlenumber=${itemId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'Access-Token': accessToken,
        'Client-Secret': clientSecret
      }
    })
      .then((res) => res.json())
      .then((data) => {
        setFileId(data.ArticleFileConnections[0].FileId)
        console.log(data.ArticleFileConnections[0].FileId) // Prints an id-number in the console
      })
  }, [])

当我拥有 FileId 时，我将它与另一个名为 Archive 的端点一起使用以获取图像。获取的文档如下所示：

  useEffect(() => {
    fetch(`https://api.fortnox.se/3/archive/${fileId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'Access-Token': accessToken,
        'Client-Secret': clientSecret
      }
    })
      .then((res) => res.json())
      .then((data) => {
        setArticleImg(data)
        console.log(data) // Prints an object thats a folder structure with an empty array 
      })
  }, [])

我尝试将 ${fileid} 更改为存档端点中的实际 ID 号，如下所示 https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c然后我在控制台中收到此错误消息： Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0

但是，如果我在端点中传递 ${fileid}，我不会收到该错误，https://api.fortnox.se/3/archive/${fileid}尽管当我 console.log 时，我传入的状态 fileId 会打印 fileId 编号。

所以我期望的是，我在存档端点中使用的 fileId-state 应该通过编写此代码来显示图像。

 <div>
    <img src={articleImg} alt="product" />
 </div>

我希望这一切都是可以理解的，我希望有人可以帮助我解决我做错的事情。

谢谢你。

注意：这一切都适用于邮递员。当我尝试像上面的流程这样的端点时，它会显示带有这个端点的图像https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c

标签： reactjsfetchendpoint

useEffect(() => { fetch(`https://api.fortnox.se/3/archive/${fileId}`, { method: 'GET', headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'Access-Token': accessToken, 'Client-Secret': clientSecret } }) .then((res) => res.json()) .then((data) => { setArticleImg(data) console.log(data) // Prints an object thats a folder structure with an empty array }) }, [fileId]) // Notice the change here. It ensures that the useEffect is called every time the fileId is updated.

reactjs - React：无法将 id 传递给端点以显示图像

问题描述

解决方案

推荐阅读