React渲染异常：条件为真仍触发Cannot read .map of undefined错误

看起来你遇到的问题主要来自两个潜在的点：初始状态未正确初始化数组，以及嵌套数据的未定义检查缺失，咱们一步步来修复：

1. 先修复初始state的定义 #

你的this.state.sites在组件挂载初期（API请求完成前）应该是undefined，这时候执行this.state.sites.length就会先抛出错误，更别说后续的map了。

在组件的构造函数里，把sites初始化为空数组：

constructor(props) {
  super(props);
  this.state = {
    sites: [], // 关键：初始化为空数组，而非undefined
    edit: false,
    new: false,
    editSite: false,
    addSites: false,
    site: null,
    index: null,
    siteIndex: null,
    numberOfNewSites: 1
    // 其他你的state属性
  };
}

2. 优化hasSites的判断逻辑 #

为了更严谨，避免非数组类型导致的错误，更新hasSites的判断：

render() {
  // 先确认sites是数组，再判断长度
  const hasSites = Array.isArray(this.state.sites) && this.state.sites.length > 0;
  // ... 后续代码
}

3. 处理嵌套的site.sites.map报错 #

你代码里还有一处嵌套的site.sites.map，如果API返回的某个site对象里sites字段是undefined或null，同样会触发map报错。给这部分也加上安全检查：

{!this.state.addSites && <SitesList>
  {/* 先确认site.sites是数组再执行map */}
  {Array.isArray(site.sites) && site.sites.map((item, itemIndex) => (
    {/* 别忘了给列表项加key属性，这是React的要求 */}
    <SiteItem key={itemIndex}>
      <h2>{item.siteName}</h2>
      <p onClick={() => this.setState({editSite: true, site: site, index: index, siteIndex: itemIndex})}>Edit</p>
      <p onClick={() => this.deleteSite(index, itemIndex)}>Delete</p>
    </SiteItem>
  ))}
</SitesList> }

4. 完善API请求的错误处理 #

如果API请求失败，response.data可能不是预期的数组，甚至请求会抛出异常，所以给loadSites加上错误捕获和兜底处理：

async loadSites() {
  try {
    const response = await axios.get("/api/v1/get-site-types/12");
    // 确保存入state的是数组，避免API返回非数组数据
    this.setState({sites: Array.isArray(response.data) ? response.data : []});
  } catch (error) {
    console.error("加载站点数据失败:", error);
    // 请求失败时也设置为空数组，避免后续渲染报错
    this.setState({sites: []});
  }
}

额外提醒：给列表项添加key属性 #

React列表渲染要求每个子元素有唯一的key属性，你当前的代码里没有给<Site>和<SiteItem>加key，这会导致React渲染性能问题和警告，建议补充：

{this.state.sites.map((site, index) => (
  <Site key={index}> {/* 或者用site的唯一ID，比如site.id */}
    {/* ... 内部代码 */}
  </Site>
))}

这样修改后，就能避免“无法在undefined上执行.map”的错误，同时让你的代码更健壮。

内容的提问来源于stack exchange，提问作者Toma Tomov