React：componentDidMount内条件setTimeout更新state不触发组件重渲染

关于React类组件更新State后未重新渲染的排查思路 #

嘿，我来帮你拆解下这个问题～React类组件的重新渲染触发条件是state或props发生浅比较可见的变化，如果更新后没渲染，大概率是你更新state的方式不符合React的immutable（不可变）原则，结合你给出的组件初始State，我整理了几个常见的排查点：

• 直接修改原State对象/数组，未创建新引用
  你的State里包含steps（嵌套对象）、content（数组）这类复杂数据类型，如果直接修改原对象的属性，比如：

  // 错误写法：直接修改原state的引用类型
  this.state.steps[2] = ["实际内容"];
  this.setState({ steps: this.state.steps });
  

  这种情况下，steps的引用地址没有变化，React的浅比较会认为State没更新，自然不会触发渲染。正确的做法是创建新的对象/数组：

  // 正确写法：用展开运算符生成新对象
  this.setState(prevState => ({
    steps: {
      ...prevState.steps,
      2: ["实际内容"]
    }
  }));
  

  数组类型的content同理，不能直接用push/splice修改原数组，要通过[...prevState.content, 新元素]或者prevState.content.slice()这类方式生成新数组后再更新。

• 检查是否自定义了shouldComponentUpdate方法
  如果你给About组件添加了shouldComponentUpdate生命周期方法，返回的判断逻辑可能阻止了渲染。比如方法里只判断了introIsRunning或animationStep的变化，没考虑steps/content的更新，这时候即使这两个属性变了，组件也不会重新渲染。如果没有自定义这个方法，这条可以忽略。

• State更新的异步性导致的视觉误解
  React的setState是异步批量更新的，如果你在调用setState后立刻去操作DOM或者做依赖State的计算，可能拿到的还是旧值，看起来像是没渲染，但其实组件已经在队列中等待更新。这种情况可以用setState的回调函数来处理后续逻辑：

  this.setState({ animationStep: 3 }, () => {
    // 这里能拿到更新后的State，做DOM操作或其他逻辑
    console.log(this.state.animationStep); // 输出3
  });
  

你可以先检查自己更新State的代码，看看是不是踩了直接修改原引用的坑，这是类组件State不触发渲染最常见的原因～

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