hello I'm trying to fetch data from api strapi and display it in reactjs frontend, I'm using axios library,

this 'url' data i want to fetch but always getting response undefined or "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'url')", see on image

image json

this is the code I use to get data :

componentDidMount() {

    const url = "http://localhost:1337/videos"

    axios.get(url)
        .then(data_video => {
            console.log(data_video.data.video.url);
            this.setState({
                // data: data_video.data
            })
        })
}

CodePudding user response：

The problem is your state is being set before the api call has finished.

You need a async componentDidMount

async componentDidMount() {

    const url = "http://localhost:1337/videos"

    await axios.get(url)
        .then(data_video => {
            console.log(data_video.data.video[0].url);
            this.setState({
                data: data_video.data.video[0].url
            })
        })
}