React Query获取数据后无法用map遍历数组求助

开发者阿泽

2026-7-28

解决React Query数据遍历的undefined错误

问题分析

从代码来看，你遇到的Cannot read properties of undefined错误大概率不是originalPlantsHolder.map本身的问题，而是以下两个潜在原因之一：

组件渲染过程中，data在某些时机仍为undefined，导致originalPlantsHolder被赋值为undefined后执行map报错
代码中使用的plants变量未正确初始化，导致plants.length触发读取undefined属性的错误（你代码里的plants未在这段代码中定义，大概率是组件state但初始值为undefined）

具体修复方案

1. 确保遍历的数组始终为有效数组

即使React Query的status为success，也可以通过默认值兜底，避免data意外为undefined的情况：

// 赋值时添加默认空数组
originalPlantsHolder = data || [];

// 或者在map时使用可选链+空数组兜底
{ (originalPlantsHolder || []).map((plant: Plant) => ...) }

2. 修复`plants.length`的未定义问题

代码中<div id="plants-counter">You Have {plants.length} Plants</div>里的plants如果是组件state，确保初始化为空数组：

// 初始化state时设置默认空数组
const [plants, setPlants] = useState<Plant[]>([]);

如果plants是从data衍生的状态，直接使用originalPlantsHolder.length代替更合理：

<div id="plants-counter">You Have {originalPlantsHolder.length} Plants</div>

3. 优化条件判断逻辑

把originalPlantsHolder的赋值逻辑移到success分支内，避免不必要的赋值：

if (status === 'loading') { return <Spinner /> }
if (status === 'error') { return 'Could Not Complete your request'}

if (status === 'success') {
    const originalPlantsHolder = data || [];
    console.log(originalPlantsHolder);
    return (
        // 你的JSX代码
    )
}
// 兜底返回null，避免组件无返回值报错
return null;