React类组件修改解构出的state变量后传递prop不更新如何解决？

问题原因 #

你描述的操作本身从React运行逻辑上不存在问题，render函数内同步修改从state解构出的临时变量后，传递给子组件的一定是修改后的值，出现异常可以对照两个常见场景排查：

• 你自己补充的场景：目标子组件所在的渲染分支中，修改变量的条件没有命中，变量实际未被更新，传递的自然是state原始值。
• 很多新手容易踩的坑：修改indexTabPoints的逻辑写在了render函数return语句之后，或者放在了异步回调（setTimeout、接口请求回调等）中，render执行返回JSX时还未触发修改逻辑，子组件拿到的自然是初始解构的旧值。

保持解构写法的最佳实践 #

要避免这类问题，同时保留解构的写法，推荐按规范组织代码逻辑：

• 所有派生值计算逻辑统一放在render函数最开头、解构state之后的位置，不要散写在JSX拼接逻辑中间，避免漏执行：

render() {
  // 统一解构state、props
  const { indexTabPoints } = this.state;
  // 统一计算所有派生值，不直接修改解构出来的原始变量
  const activeTabIndex = condition ? indexTabPoints + 1 : indexTabPoints;
  // 渲染阶段直接使用计算完成的变量
  return (
    <PointTab
      activeIndex={activeTabIndex}
      // 其他props
    />
  )
}

• 解构state时建议用const声明变量，从语法层面禁止修改原始解构值，所有派生逻辑都用新变量承接，降低出错概率。
• 如果该派生值在多个子组件、多个生命周期中用到，可以抽成类的getter统一维护，避免多份逻辑不一致：

class YourComponent extends React.Component {
  // 统一维护派生值计算逻辑
  get activeTabIndex() {
    const { indexTabPoints } = this.state;
    return condition ? indexTabPoints + 1 : indexTabPoints;
  }

  render() {
    return (
      <>
        <PointTab activeIndex={this.activeTabIndex} />
        <OtherComponent index={this.activeTabIndex} />
      </>
    )
  }
}

内容的提问来源于stack exchange，提问作者Jorah-M