React: Can't pass an id to an endpoint in order to display an image

Question

I'm quite new to react and have an issue that i'm not sure whats wrong. I have one external api with an endpoint that contains articles and another endpoint to get the images thats connected with the articles. I want to display the articles and the images together, but I can't get the images to show.

The flow is as follows:

First I find the article with the article api endpoint and the article id. And it looks like this:

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

In order to get the image to that article I have to find a FileId by searching the article number against ArticleFileConnections endpoint: (Documentation)

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
      })
  }, [])

When I have the FileId I use it with another endpoint called Archive in order to get the image. Documentation That fetch looks like this:

  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 
      })
  }, [])

I tried to change the ${fileid} to the actual id-number in the archive endpoint like this https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c Then I get this error message in the console: Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0

But I don't get that error if I pass the ${fileid} in the endpoint https://api.fortnox.se/3/archive/${fileid} Although when I console.log the state fileId that I pass in it prints the fileId-number.

So what I expect is that the fileId-state that I use in the archive endpoint should display an image by writing this code.

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

I hope all this is understandable and I hope someone can help me with what i'm doing wrong.

Thank you.

Note: It all works in postman. When I try the endpoints like the flow above it shows the image with this endpoint https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c

Answer 1

Your useEffect for fetching the fileId is behaving as a componentDidMount. What you want instead is a componentDidUpdate behavior, which you can do by

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.