React中TopPlay组件TypeError（读取'tracks'失败）的解决方法

第一个错误："cannot read properties of undefined reading 'tracks'" #

原因：API请求处于pending状态时，data的值为undefined，你原代码里的(data['tracks'])?.slice仅给slice加了可选链，但data['tracks']在data为undefined时已经无法访问，直接触发报错。

解决方法：把可选链操作符移到data后面，确保data存在后再访问tracks：

const { data } = useGetTopChartsQuery();
const toplays = data?.tracks?.slice(0, 5);

用方括号写法也可：

const toplays = data?.['tracks']?.slice(0, 5);

这样当data未返回或data.tracks不存在时，toplays会自动变为undefined，不会触发报错。

第二个错误：改为data?.slice(0,5)后的报错 #

原因：Shazam API返回的data是包含tracks数组的对象，而非数组本身。直接对对象调用数组方法slice，自然会报错——对象没有slice方法。

解决方法：必须对data.tracks这个数组调用slice，也就是采用第一个问题的正确写法，不要直接操作data对象。

额外优化：处理请求状态 #

结合RTK Query的请求状态做加载/错误处理，避免数据未返回时的异常渲染：

const { data, isLoading, error } = useGetTopChartsQuery();

if (isLoading) return <div>加载中...</div>;
if (error) return <div>加载失败：{error.message}</div>;

// 数据返回后可安全访问tracks
const toplays = data.tracks.slice(0, 5);

内容的提问来源于stack exchange，提问作者Gayatri Dyunakhe