求助：Enzyme ShallowWrapper.setState在Redux连接组件中无法生效

兄弟，看你花了两天排查这个结合本地状态和Redux的SignIn组件，结合你给出的代码片段，我给你梳理几个高频踩坑点和对应的解决思路——都是我之前做登录模块时踩过的实坑：

1. 本地isLoading状态和Redux状态不同步 #

从你的代码看，你用本地state存isLoading，同时组件又连接了Redux。如果登录请求是通过Redux action发起的，很容易出现本地加载状态和Redux中登录状态脱节的情况：比如请求发起后你设了isLoading: true，但Redux返回登录结果时，忘了把本地的isLoading改回false，导致一直显示加载组件；或者Redux状态更新了，但本地状态没跟上，渲染逻辑混乱。

两种修复方向： #

• 把isLoading移到Redux统一管理（更推荐，登录状态属于全局状态，统一管理更清晰）：
  先在reducer里加isLoading字段：

  const authReducer = (state = { isLoading: false, user: null }, action) => {
    switch(action.type) {
      case 'LOGIN_START':
        return { ...state, isLoading: true };
      case 'LOGIN_SUCCESS':
      case 'LOGIN_FAILED':
        return { ...state, isLoading: false };
      default:
        return state;
    }
  };
  

  然后组件里直接用Redux的isLoading，不用本地state了：

  render() {
    const { isLoading } = this.props; // 从Redux props里取
    return isLoading ? <SomeLoadingComponent /> : <MainSigninComponent />;
  }
  

• 如果非要保留本地state，一定要同步Redux状态变化：
  用componentDidUpdate监听Redux中登录状态的变化，同步更新本地isLoading：

  componentDidUpdate(prevProps) {
    // 假设Redux里存了登录后的用户信息在this.props.auth.user
    if (prevProps.auth.user !== this.props.auth.user) {
      this.setState({ isLoading: false });
    }
  }
  

2. Redux连接导致的不必要重复渲染 #

如果你的ConnectedSignIn在mapStateToProps里返回的对象每次都是新引用（比如直接返回{ auth: state.auth }，而state.auth是一个新对象），会导致组件频繁重复渲染，甚至可能让你误以为本地isLoading状态没生效（其实是组件反复渲染，视觉上有异常）。

修复方法： #

用reselect做记忆化选择器，避免每次返回新的props引用：

import { createSelector } from 'reselect';

// 先定义基础选择器
const selectAuth = state => state.auth;
// 再做记忆化的派生选择器
const selectIsLoading = createSelector(
  [selectAuth],
  auth => auth.isLoading
);

const mapStateToProps = state => ({
  isLoading: selectIsLoading(state)
});

export default connect(mapStateToProps)(SignIn);

这样只有当auth.isLoading真的变化时，才会触发组件渲染。

3. 登录请求中isLoading的更新时机错了 #

如果你的登录请求逻辑里，setState({ isLoading: true })的时机不对，或者请求失败时忘了重置isLoading，也会导致加载状态卡住。

正确的请求逻辑示例： #

handleLogin = async (email, password) => {
  try {
    // 发起请求前立刻设为加载中
    this.setState({ isLoading: true });
    // 调用Redux的登录action
    await this.props.login({ email, password });
    // 登录成功后的逻辑，比如跳转首页
    this.props.history.push('/dashboard');
  } catch (err) {
    // 处理登录错误，比如提示用户
    alert(err.message);
  } finally {
    // 不管成功失败，都要重置加载状态
    this.setState({ isLoading: false });
  }
};

用finally块确保isLoading一定会被重置，不会一直卡在加载状态。

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