React中ComponentDidMount内遍历多层对象的for循环失效问题

嘿，我来帮你分析下为啥遍历notes prop的时候控制台没输出~ 先从几个常见的坑入手排查：

1. 先确认notes的实际值到底是什么 #

很多时候问题出在你以为notes是defaultProps里的对象，但实际上父组件传递的是空对象/undefined，或者还没加载完成。先在componentDidMount开头加个日志，看看实际拿到的是什么：

componentDidMount() {
  console.log("当前notes prop的值：", this.props.notes);
  // 后面再写遍历逻辑
}

• 如果输出是空对象{}，那说明父组件传递的notes覆盖了defaultProps，得去父组件那边检查数据是否正确传递；
• 如果输出是你定义的defaultProps内容，那问题就出在遍历逻辑上。

2. 检查遍历多层级对象的逻辑是否正确 #

多层级对象不能直接用普通循环遍历，得用递归或者嵌套循环处理。比如你可以写一个递归遍历函数：

componentDidMount() {
  // 递归遍历多层级对象
  const traverseNotes = (obj) => {
    for (const key in obj) {
      // 只遍历自身属性，避免原型链污染
      if (obj.hasOwnProperty(key)) {
        console.log(`键：${key}，值：${obj[key]}`);
        // 如果当前值是对象（且不是null），继续递归遍历
        if (typeof obj[key] === 'object' && obj[key] !== null) {
          traverseNotes(obj[key]);
        }
      }
    }
  };

  // 调用遍历函数
  traverseNotes(this.props.notes);
}

要是你不想用递归，也可以用嵌套的Object.keys遍历：

componentDidMount() {
  // 遍历第一层
  Object.keys(this.props.notes).forEach(tier1Key => {
    const tier1Value = this.props.notes[tier1Key];
    console.log(`第一层键：${tier1Key}`);
    // 遍历第二层
    Object.keys(tier1Value).forEach(tier2Key => {
      console.log(`第二层键：${tier2Key}，内容：${tier1Value[tier2Key]}`);
    });
  });
}

3. 父组件异步传值的情况 #

如果父组件的notes是通过接口异步获取的，那componentDidMount执行的时候，notes可能还没更新成真实数据。这种情况下，你需要在componentDidUpdate里处理：

componentDidMount() {
  // 初始化时处理一次
  this.processNotes(this.props.notes);
}

componentDidUpdate(prevProps) {
  // 只有当notes变化时才重新处理
  if (prevProps.notes !== this.props.notes) {
    this.processNotes(this.props.notes);
  }
}

// 把遍历逻辑抽成单独方法，复用性更好
processNotes(notes) {
  const traverse = (obj) => {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        console.log(`键：${key}，值：${obj[key]}`);
        if (typeof obj[key] === 'object' && obj[key] !== null) {
          traverse(obj[key]);
        }
      }
    }
  };
  traverse(notes);
}

最后再提个小细节 #

React的defaultProps只有在父组件未传递该prop或者传递的是undefined时才会生效。如果父组件传递了null或者空对象{}，那会直接用传递的值，而不是defaultProps里的内容，这点要注意~

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