0

Im trying to make a const like this const feedURL = this.state.podcasts[0].feedUrl But the state is not updated with the fetch I do above where I set the state of podcasts, so i get TypeError: Cannot read property 'feedUrl' of undefined, that I understand.

But HOW should i get this to work? Anyone who can point me in the right direction..

This is my component:

import React, { Component } from 'react'
import Feed from 'feed-to-json-promise'
import sanitizeHtml from 'sanitize-html'

export default class Podcast extends Component {

  state = {
    podcasts: [],
    episodes: [],
    loading: true,
  }

  componentDidMount () {
    const podId = this.props.match.params.podId
    fetch(`https://itunes.apple.com/lookup?id=${podId}`)
      .then(response => response.json())
      .then(podcasts => this.setState({
        podcasts: podcasts.results,
        loading: false,
      }))

    const feed = new Feed()
    const feedURL = this.state.podcasts[0].feedUrl

    feed.load(feedURL)
      .then(feedInfo => this.setState({
        episodes: feedInfo.items
      }))
  }

    render() {
    const { podcasts, episodes, loading } = this.state
    const { podId } = this.props.match.params

    if (loading === true) return null
    const { collectionName, artworkUrl600, primaryGenreName, feedUrl } = podcasts.find((podcast) => podcast.collectionId === Number(podId))

    return (
      <div>
          <img src={artworkUrl600} alt={collectionName} style={{width: '300px'}} />
          <h2>{collectionName} ({podId})</h2>
           <p>{primaryGenreName}</p>
           <p><a href={feedUrl} target='_blank'>RSS Feed URL</a></p>
            <ul>
              {episodes.map((episode, i) => {
                const { title, description } = episode;
                return (
                  <li key={title.slice(0, 3)}>
                    <h2>{title}</h2>
                    <p>{sanitizeHtml(description, {allowedTags: [], allowedAttributes: []})}</p>
                  </li>
                )
              })}
            </ul>
      </div>
    )
  }
}
Jonas Alvarson
  • 411
  • 2
  • 6
  • 20
  • Issue is not in `const` It is coming in `this.state.podcasts[0].feedUrl`, I think `this.state.podcasts[0]` is coming undefined that is why It is indicating that can not read the property of `undefined` . – Nishant Dixit Sep 20 '18 at 11:49
  • The handlers on the `fetch` are **asynchronous**. (So is `setState`.) So you can't use `podcasts` in `componentDidMount` **after** the `then` calls; you have to use `postcasts` **within* the `then` handler. Your `render` also has to handle the case where there are no podcasts to render (because you start out with none). – T.J. Crowder Sep 20 '18 at 11:50
  • is nesting the initialization to `const feedURL` allowed in .then() ? – trk Sep 20 '18 at 11:50
  • Side note: You're not checking `response.ok` on the `fetch` result. This is such a common error [I've written about it on my anemic little blog](http://blog.niftysnippets.org/2018/06/common-fetch-errors.html). – T.J. Crowder Sep 20 '18 at 11:51

0 Answers0