React-Redux连接组件调用setState后未触发重渲染更新视图问题

核心问题原因 #

• 异步时序错误：verifyLevelOne的执行逻辑为请求后端接口，请求成功后才会dispatch action修改Redux中的status值。你在verifyLevelOne的then回调中直接读取当前this.props.status，此时Redux状态变更还未同步到组件props，读取到的仍是旧的status值，导致showButton被赋值为false。刷新页面后Redux状态初始化时status已经是VERIFIED，所以按钮可以正常显示。
• 打印取值误区：你的console.log写在setState调用外侧，setState本身是异步执行的，此处打印拿到的是更新前的state值。就算你看到控制台打印为true，也是Chrome控制台惰性求值导致的，实际执行判断时showButton为false。
• 冗余本地状态：showButton的取值完全依赖Redux中的status属性，不需要额外在组件本地维护state，多一层转换反而增加了时序错误概率。

修复方案 #

方案一（推荐，最优解） #

直接移除组件本地冗余的showButton状态，直接通过props的status判断按钮是否展示：

1. 删掉constructor中state的showButton初始化字段
2. 删掉handleSubmit中修改showButton的相关代码
3. 修改render中的按钮判断逻辑：

{ this.props.status === 'VERIFIED' && <Button onClick={this.handleShowModal} variant="contained" color="primary">Proceed</Button> }

Redux的status更新会自动触发组件重渲染，不需要额外做本地状态同步。

方案二（保留本地showButton状态） #

如果有特殊业务逻辑需要保留本地showButton状态，新增componentDidUpdate生命周期监听props变化同步本地状态：

componentDidUpdate(prevProps) {
  // 仅在status变化时同步更新本地showButton
  if (prevProps.status !== this.props.status) {
    this.setState({
      showButton: this.props.status === 'VERIFIED'
    })
  }
}

可选优化点 #

render方法中解构state时补充showButton字段，优化代码可读性：

const { formError, showModal, showButton } = this.state;

修改后按钮判断逻辑可以简化为：

{ showButton && <Button onClick={this.handleShowModal} variant="contained" color="primary">Proceed</Button> }

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