我尝试显示来自外部 API 的图像。但我只收到错误

Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0"

我猜问号意味着它是某种无法识别的东西……

无论如何，我按照 API 的文档来显示图像。要从寄存器中获取图像，我使用端点 Article File Connections 来获取 FileId，我在 Archive 端点中使用该 FileId 来获取图像。

以下是两个端点的文档：

• https://developer.fortnox.se/documentation/resources/article-file-connections/
• https://developer.fortnox.se/documentation/resources/archive/

当我在 postman 中尝试使用 itemId 和 FileId 的端点时，它可以工作并显示图像，但我的代码中没有。所以我的代码中肯定有什么地方做错了。但是到底是什么问题呢？

我觉得是我的 SingleProductImage 页面出了问题，有人能帮忙吗？

我正在使用 React hooks 来获取 api，这是我的代码：

export const SingleProductImage = (props) => {
  const [articleImg, setArticleImg] = useState('')
  console.log(articleImg) // when I console this nothing shows
  console.log(props.fileid) // when I console this the fileid shows

  useEffect(() => {
      fetch('https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/archive/${props.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)
    })
  }, [articleImg])

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

SingleProductImage 页面

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

  useEffect(() => {
    fetch(`https://cors-anywhere.herokuapp.com/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])

  useEffect(() => {
    fetch(`https://cors-anywhere.herokuapp.com/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)
      })
  }, [itemId])

  return (
        <div>
          <SingleProductImage fileid={fileId} />
        </div>
)