Reactjs 尝试从外部API显示图像时出错（JSON中的意外标记࿽；）

我正在尝试显示来自外部api的图像。但我只得到了错误

未捕获（承诺中）语法错误：意外标记� 在JSON中的位置0“

我猜问号的意思是它是一个不明的东西

总之，我遵循了api文档中关于如何显示图像的说明。要从寄存器中获取图像，我使用端点文章文件连接来获取我在存档端点中用于获取图像的文件ID

以下是两个端点的文档：

当我在postman中使用

itemId

和

FileId

尝试端点时，它工作并显示图像，但不在我的代码中。因此代码中有一些地方我做错了。但这是什么呢

我想这是我的

SingleProductImage

页面中的一个问题，有人能帮忙吗

我正在使用React钩子获取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>
  )
}

export const SingleProductImage=（道具）=>{
常量[articleImg，setArticleImg]=useState（“”）
console.log（articleImg）//当我控制台时，没有显示任何内容
console.log（props.fileid）//当我控制台这个时，fileid显示
useffect（（）=>{
取（'https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/archive/${props.fileid}{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
接受：'application/json'，
“访问令牌”：访问令牌，
“客户端机密”：clientSecret
}
})
.然后（（res）=>res.json（））
。然后（（数据）=>{
setArticleImg（数据）
console.log（数据）
})
}，[articleImg]）
返回(
)
}

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>
)

export const SingleProductPage=（）=>{
常量{itemId}=useParams（）
const[article，setArticle]=useState（[]）
常量[articleImg，setArticleImg]=useState（“”）
const[fileId，setFileId]=useState（[]）
useffect（（）=>{
取回(`https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/articles/${itemId}`{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
接受：'application/json'，
“访问令牌”：访问令牌，
“客户端机密”：clientSecret
}
})
.然后（（res）=>res.json（））
。然后（（数据）=>{
console.log（数据）
setArticle（data.Article）
console.log（数据）
})
}，[itemId]）
useffect（（）=>{
取回(`https://cors-anywhere.herokuapp.com/https://api.fortnox.se/3/articlefileconnections/?articlenumber=${itemId}`{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
接受：'application/json'，
“访问令牌”：访问令牌，
“客户端机密”：clientSecret
}
})
.然后（（res）=>res.json（））
。然后（（数据）=>{
setFileId（data.ArticleFileConnections[0].FileId）
console.log（data.ArticleFileConnections[0].FileId）
})
}，[itemId]）
返回(
)

您正在api返回的整个对象上强制转换

.json（）

。取而代之的是只获取url，错误就会消失

... 
.then((res)=> setArticleImg(res.url))
.catch((err)=> console.log(err))

---

在代码的这一部分中添加一个

console.log（res）

。然后（（res）=>res.json（））而不是执行.json，看看响应是什么。没有阅读api提供程序的文档，但可能不是您所期望的，即只是urlI添加了console.log（res）正如你所建议的，我想我得到了我期望的响应，它是一个url，具有我在《邮递员》中尝试的正确文件ID。它看起来是这样的：响应{type:“cors”，url:“…se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c”，重定向：false，状态：200，确定：true，}正如您所看到的，您得到的不仅仅是URL，而是一个包含其他信息的对象。然后您需要获取res.URL，而不是整个res，因为您的URL存储在“URL”键下，它应该可以解决您的错误。谢谢！！这使我的错误消失。耶。但是现在我在get上遇到另一个错误，状态为400个错误请求。我想这是因为我加了前缀““到我的URL。但是如果没有它，我现在不必解决被CORS阻止的错误。