Блог

Я хочу получить данные, которые успешно возвращаются после componentDidMount, но до того, как появится сообщение об ошибке.данные не определены:

 // 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.getinfoamp;artist=${singer}amp;api_key=a3c9fd095f275f4139c33345e78741edamp;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.getinfoamp;artist=Ariana Grandeamp;api_key=a3c9fd095f275f4139c33345e78741edamp;format=json

Проблема здесь:

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

При первоначальном рендеринге singer.artist значение не определено, и если вы его вызовете singer.artist.name , оно выдаст ошибку. name of undefined …. Вам просто нужно дождаться получения данных и обновить состояние.

Попробуйте так

 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.getinfoamp;artist=${singer}amp;api_key=a3c9fd095f275f4139c33345e78741edamp;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>
    )
  }
}
 

У вас let singer = this.state this.setState({ singer: ... }) есть, но в вашем коде этого нет. Вместо this.setState({ data }) этого попробуйте this.setState({ singer: data })

Установите ваше состояние, как показано ниже, и,

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

и вы можете выйти из системы следующим образом,

         console.log(this.state.singer)