为什么这个 console.logconsole.log(data.lyrics) 在 react.js 中给我 undefined？

Question

Would you please tell me what I'm doing wrong here?

import { useState,useEffect } from 'react';

const useFetchData = (url) => {

    const [data,setData]=useState( [] );   

        useEffect(()=>{
            fetch(url,{
                crossDomain:true, 
                headers:{
                'Content-Type': 'application/json',}
            })
            .then(res =>{
                return res.json();
            })
            .then(dataa =>{
                /* setData(dataa.message.body.track_list.map(trc =>{
                    return [[trc.track.track_name],[trc.track.artist_name],[trc.track.album_name]];
                }));*/
                setData(dataa.message.body);
                
                /* data.message.body.track_list.trac.track.map((trac)=>{
                })
                console.log(data);
                console.log(dataa.message.body);*/
            }).catch(err => console.log(err));
            console.log(data.lyrics);
        },[])
    return data;
}
 
export default useFetchData;

Answer 1

Because you're calling data from inside the useEffect hook, you're only getting the value of data at the point where the hook was executed. setData doesn't update the data variable immediately, but updates the state and triggers a rerender of the component.

If you move the console.log(data.lyrics); out of the hook, you'll see that once the component is rerendered its value should be correct.