Javascript TypeError:undefined不是对象（正在计算'；data.graphics.dvd'；）

我在玩react native，从API获取一些数据。一切都好。当我试图将数据显示到我的文件中时，我只能显示第一个类似data.artistName的文件，但当我试图访问data.graphics.dvd时，我会出现错误“TypeError:undefined不是对象（评估'data.graphics.dvd'）”

图形是一个对象

const Videos = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchPost = async () => {
     fetch('https://myurl.com/api/title/5fac58f764e6710/')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
    }
    fetchPost();
    
  }, []);

    return (
  
 
    <View style={styles.wrapper}>
     
    <Text style={styles.title}>{data.artistName}{data.graphics.dvd}</Text>
      
    </View>
   )
  };

const视频=（）=>{
const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（[]）；
useffect（（）=>{
const fetchPost=async（）=>{
取（'https://myurl.com/api/title/5fac58f764e6710/')
.then（（response）=>response.json（））
.然后（（json）=>setData（json））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}
fetchPost（）；
}, []);
返回(
{data.artistName}{data.graphics.dvd}
)
};

在初始状态下，将

数据定义为空数组：

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

这意味着在第一次渲染时，
data=[]
此时，当您访问
data.artistName
时，其计算结果为
未定义
，但不会导致类型错误

但是，当
data==[]
，然后您尝试获取
data.graphics.dvd
时，会出现类型错误，因为
graphics
未定义，您正试图从中获取
dvd

要解决此问题，请在渲染该部分之前检查
数据是否实际包含某些内容：

{(data.artistName && data.graphics) ? <Text style={styles.title}>{data.artistName}{data.graphics.dvd}</Text> : null}


这都是基于
数据的。一旦API调用返回，graphics
就存在，这是原始帖子上的评论员提到的。
如果你得到错误，那是因为graphics为null，而你正试图得到null的“dvd”。你检查过数据是否包含“图形”吗？是的，问题是如果应用程序重新加载并停留在该屏幕上，我会得到数据。但是当浏览到那个页面时，我不明白。谢谢你的回复。现在我明白了！它无法加载它返回的未定义的所有数据。我说得对吗？你的解决方案很有魅力！谢谢。时间线将如下所示：1）初始渲染2）
useffect
运行3）
fetch
inside
useffect
返回4）下一次渲染。因此，在第4步之前，您还没有任何数据。
if (loading) {
  return <Text>Loading...</Text>
}

return (<View/>) //your normal return