ReactJS调用GraphQL API报错：无法读取map属性问题排查

我帮你分析下问题所在，主要是axios响应数据处理错误，还有几个小细节需要调整，具体如下：

1. 核心问题：axios响应结构处理错误 #

你在componentDidMount里把整个axios返回的result对象赋值给了state的tags，但axios的响应结构里，服务器返回的实际数据是在result.data里的。而你渲染的时候试图访问tags.data.getTags，这就导致了层级错误——因为此时tags本身就是axios的response对象，它的data才是API返回的GraphQL结果，所以正确的层级应该是tags.getTags而不是tags.data.getTags。

修改setState的部分：

.then(result => this.setState(() => ({ tags: result.data })),

2. 移除GraphQL查询中的重复字段 #

你的tagslist查询里重复写了两次tagVersion，虽然GraphQL不会报错，但这是冗余的，建议删除重复项：

const tagslist = `
  { getTags {
      id
      tagName
      tagDesc
      tagVersion
    }
  }
`;

3. 添加错误处理逻辑 #

当前代码没有处理请求失败的情况，一旦API请求出错，会抛出未处理的Promise拒绝。所以要在then后面加上catch：

componentDidMount() {
  appBaseUrl
    .post('', { query: tagslist })
    .then(result => this.setState(() => ({ tags: result.data })))
    .catch(error => {
      console.error('请求GraphQL API失败:', error);
      // 可以在这里设置错误状态，给用户提示
    });
}

4. 优化渲染时的空值判断 #

你当前的判断逻辑已经不符合修改后的结构了，而且可以用更简洁的可选链操作符（ES2020+支持）来简化：

<tbody>
  {tags.getTags?.map(function(item) {
    return (
      <tr key={item.id}> {/* 这里建议用item.id作为key，比数组索引更可靠 */}
        <td>{item.id}</td>
        <td>{item.tagName}</td>
        <td>{item.tagDesc}</td>
        <td>{item.tagVersion}</td>
      </tr>
    );
  })}
</tbody>

如果你的环境不支持可选链，可以改成：

<tbody>
  {tags && tags.getTags && tags.getTags.map(function(item) {
    // ... 渲染内容
  })}
</tbody>

另外，建议用item.id作为tr的key，而不是数组索引，这样在列表变化时React的渲染更高效。

5. 调整初始state（可选，但更稳妥） #

为了避免渲染时出现不必要的undefined，你可以把初始state设置为和API返回结构一致的空数据：

this.state = { tags: { getTags: [] } };

修改后的完整代码 #

import React, { Component } from 'react'
import "./styles.css";
import axios from 'axios';

const appBaseUrl = axios.create({ baseURL: 'http://localhost:8099/graphql' });

const tagslist = `
  { getTags {
      id
      tagName
      tagDesc
      tagVersion
    }
  }
`;

class TagsController extends React.Component {
  constructor(props) {
    super(props);
    // 初始state和API返回结构对齐
    this.state = { tags: { getTags: [] } };
    this.headers = [
      { key: "id", label: "Tag Id" },
      { key: "tagName", label: "Tag Name" },
      { key: "tagDesc", label: "Tag Description" },
      { key: "tagVersion", label: "Tag Version" }
    ];
  }

  componentDidMount() {
    appBaseUrl
      .post('', { query: tagslist })
      .then(result => this.setState(() => ({ tags: result.data })))
      .catch(error => {
        console.error('加载标签失败:', error);
      });
  }

  render() {
    console.log("...... url builder ......")
    const { tags } = this.state;
    return (
      <table border ="1">
        <thead>
          <tr>
            { this.headers.map(function(h) {
                return (
                  <th key = {h.key}>{h.label}</th>
                )
              }) }
          </tr>
        </thead>
        <tbody>
          {tags.getTags?.map(function(item) {
            return (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.tagName}</td>
                <td>{item.tagDesc}</td>
                <td>{item.tagVersion}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

export default TagsController;

这样修改后，应该就能正常渲染标签列表了。如果还有问题，可以打开浏览器控制台查看API请求的响应内容，确认是否和预期一致。

内容的提问来源于stack exchange，提问作者Kakarla Veera Shankara Ravindr