React TypeScript调用GraphQL接口map数据时报undefined属性读取错误

问题根因 #

你代码的核心错误是Array.map回调函数的参数解构逻辑错误：

• 你GraphQL查询返回的data.dogs数组里，每一项本身就是包含id、breed字段的狗对象
• 你在map回调中写的({dog, index}: {dog:any, index:number})，是尝试从每个数组元素中提取dog属性，但你的狗对象根本没有dog这个字段，所以得到的dog变量是undefined，访问undefined.breed自然会抛出对应类型错误。

你看到console.log(data)输出正常是浏览器控制台的特性：打印引用类型时，控制台展示的是你手动展开对象那一刻的最新值，不是代码执行打印动作时的值。首次渲染时data还未返回，你加的data ? ... : ""判断规避了报错，等请求完成data赋值后组件重新渲染，此时触发map逻辑，解构错误就暴露了。

修复方案 #

修改map的参数写法即可，两种常用写法如下：

写法1：直接接收元素变量 #

const Dogs: React.FC = () => {
  const { loading, error, data } = useQuery(GET_DOGS);
  const renderedOption = data ? data.dogs.map((dog: {id: string; breed: string}, index: number) => (
    <option key={dog.id} value={dog.breed}>
      {dog.breed}
    </option>
  )) : "" ;

  return (
    <>
      {loading && "Loading..."}
      {error && `Error: ${error.message}`}
      {renderedOption}
    </>
  );
};

写法2：直接解构元素内的字段 #

const Dogs: React.FC = () => {
  const { loading, error, data } = useQuery(GET_DOGS);
  const renderedOption = data ? data.dogs.map(({ id, breed }: {id: string; breed: string}, index: number) => (
    <option key={id} value={breed}>
      {breed}
    </option>
  )) : "" ;

  return (
    <>
      {loading && "Loading..."}
      {error && `Error: ${error.message}`}
      {renderedOption}
    </>
  );
};

如果要避免极端情况（比如后端返回的dogs数组中存在null/undefined元素），可以加可选链兜底：

<option key={dog?.id} value={dog?.breed}>
  {dog?.breed}
</option>

内容的提问来源于stack exchange，提问作者Erwin Ramadhan