使用Redux connect与reduxForm页面切换时触发path.lastIndexOf非函数错误排查

Hey there! I’ve run into this exact path.lastIndexOf is not a function error when combining Redux connect with reduxForm before, and you’re right—it almost always boils down to issues with the form name. Let’s break down what’s happening and how to fix it.

What’s Causing the Error? #

The "form named 'Object object'" clue is key here. It means reduxForm is receiving an object instead of a string for the form name internally. Since lastIndexOf is a string-only method, trying to call it on an object throws that error.

Fixes to Try #

1. Double-Check Higher-Order Component (HOC) Order

While your code looks correct at first glance, mixing up the order of connect and reduxForm can cause reduxForm to misinterpret props as the form name. The correct order is wrap your form component with reduxForm first, then wrap that result with connect:

// Correct order
const ConnectedLoginForm = connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({ 
    form: 'sigin', // Ensure this is a string!
    validate 
  })(LoginForm)
);

If you had reduxForm wrapping connect instead, it would try to use the connected component’s props (possibly an object) as the form name, leading to the error.

2. Ensure the form Config is a String

Double-check that your reduxForm configuration’s form value is a plain string, not an object, function, or any other type. Avoid these mistakes:

// ❌ Wrong: form is an object
reduxForm({ form: { name: 'sigin' }, validate })(LoginForm)

// ❌ Wrong: function returns an object
reduxForm({ form: () => ({ name: 'sigin' }), validate })(LoginForm)

Stick to a static string like form: 'sigin' as you have in your code—just confirm no other part of your code is dynamically overwriting this value to an object.

3. Avoid Naming Conflicts in mapStateToProps

If your mapStateToProps returns a property named form that’s an object, it could clash with reduxForm’s internal handling (even though they’re technically separate, some older versions have compatibility quirks). For example:

// ❌ Risky: returns an object named 'form'
const mapStateToProps = state => ({
  form: state.loginForm, // This is an object—rename it!
  // ... other props
});

Rename that property to something unique, like loginFormState, to eliminate the conflict.

4. Verify Version Compatibility

Outdated or mismatched versions of reduxForm and react-redux can cause weird edge cases like this. Make sure you’re using compatible versions (e.g., reduxForm v7+ works best with react-redux v5+). Upgrading to the latest stable versions might resolve the issue if it’s a bug in older code.

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