Using state with componentDidMount

Question

I want to fetch data that returns successfully after componentDidMount, but before there is an error that singer.data is undefined:

// imports
export default class LookSinger extends Component {
    state = {
        singer: {}
    }
    componentDidMount () {
        let { singer } = this.props.location.state;
        singer = singer.replace(/ /g,"+");
        const fetchData = async () => {
        try {
            const response = await fetch(
                `http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${singer}&api_key=a3c9fd095f275f4139c33345e78741ed&format=json`
            );
            const data = await response.json();
            this.setState({
                singer: data
            })
          } catch (error) {
            console.log(error.message);
          }
        }
        fetchData();
    }
      render() {
          let singer = this.state.singer
        return(
            <div>
                {console.log(singer.artist.name)} // gives undefined but after fetching artist.name absolutely exists
            </div>
        )
      }
}

Url is:http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=Ariana+Grande&api_key=a3c9fd095f275f4139c33345e78741ed&format=json

```singer``` is an object, shouldn't it be a string? – Junius L Nov 30 '20 at 13:06 — Junius L, Nov 30 '20 at 13:06

score 0 · Answer 1 · answered Nov 30 '20 at 13:08

0

You do let singer = this.state but there's no this.setState({ singer: ... }) in your code. Instead of this.setState({ data }), try this.setState({ singer: data })

answered Nov 30 '20 at 13:08

VersifiXion

2,152
5
22
40

can you send me the URL of your request then I can see the JSON result ? – VersifiXion Nov 30 '20 at 13:31

score 0 · Answer 2 · answered Nov 30 '20 at 13:21

0

Set you state as below and,

        const data = await response.json();
        this.setState({
            singer: data
        })

and you can log it out likes this,

        console.log(this.state.singer)

answered Nov 30 '20 at 13:21

Rajitha Udayanga

1,559
11
21

What is your problem now? – Rajitha Udayanga Nov 30 '20 at 13:33
The problem is same – s662720h_uu Nov 30 '20 at 13:35
Your problem is "singer.data is undefined:", but you don't call as singer.data is anywhere in your code. – Rajitha Udayanga Nov 30 '20 at 13:40

score 0 · Accepted Answer · answered Nov 30 '20 at 13:38

The problem is here:

{console.log(singer.artist.name)}

In the initial render, singer.artist is undefined and if you call singer.artist.name it will throw error. name of undefined.... You just need to wait for data to fetch and update the state.

Try like this

export default class LookSinger extends Component {
  state = {
    singer: {}
  }
  componentDidMount () {
    let { singer } = this.props.location.state;
    singer = singer.replace(/ /g,"+");
    const fetchData = async () => {
    try {
        const response = await fetch(`http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${singer}&api_key=a3c9fd095f275f4139c33345e78741ed&format=json`);
        const data = await response.json();
        this.setState({ singer: data })
      } catch (error) {
        console.log(error.message);
      }
    }
    fetchData();
  }
  render() {
    const { singer } = this.state
    if (!singer.artist) { // <-- Check if the data is present or not.
      return <div>Loding singer info...</div>
    }
    return(
      <div>
        <h1>{singer.artist.name}</h1>
      </div>
    )
  }
}

Using state with componentDidMount

3 Answers3