React中函数if条件内调用setState无法更新状态问题

• 首先验证setState回调是否执行
  你代码中已经为setState传入了第二个回调参数用于打印更新后的状态，如果该回调的日志没有输出，存在两种可能：
  1. selectedgroup的值和当前this.state.selectedFolder的旧值完全相等，React会判定状态无变化，跳过更新，也不会触发回调
  2. 方法的this指向异常，虽然你用箭头函数定义了archivePath天然绑定组件实例，但如果调用时被强制修改了this指向（比如作为DOM事件回调传递时未做处理、被其他工具函数修改上下文），也会导致setState调用失败
     如果回调日志有输出且selectedFolder值正确，仅在setState之后的同步代码中读取到旧值，属于React setState异步更新的正常机制，所有依赖更新后状态的逻辑请放在回调或者生命周期函数中执行。
• 检查是否有其他逻辑覆盖状态
  排查组件的componentDidUpdate、getDerivedStateFromProps等生命周期函数，以及其他和状态相关的逻辑，是否存在selectedFolder被其他操作同步覆盖的情况，比如父组件重渲染传入新的props触发状态重置。
• 优化代码写法避免副作用
  你代码中调用pathMap.pop()会直接修改原数组，后续的遍历逻辑是操作修改后的数组，如果后续有逻辑依赖原pathMap的取值可能引发异常，建议改成：

  // 替换原来的pop逻辑，不修改原数组
  selectedgroup = pathMap.at(-1);
  const traversalPath = pathMap.slice(0, -1);
  // 后续遍历用traversalPath代替pathMap
  traversalPath.forEach((baseName) => {
    console.log("baseName in enterfolder: ", baseName);
    relPath += ("/" + baseName);
    if (baseName === ".archive" || baseName.startsWith(".")) {
        // this.setState({ isArchive: true });
    } else {
        breadcrumbs.push({ name: baseName, path: relPath });
    }
  });
  

  另外原代码中用map遍历但没有用到返回的新数组，建议换成forEach避免不必要的性能开销。

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