React-Redux中调用this.props.UpdateInfo报错及多种调用方式无效求助

Hey there, let's troubleshoot this issue step by step—that error usually pops up when your component isn't properly getting the action creator injected into this.props, or there's a misconfiguration in how you're connecting to Redux. Let's go through the most common fixes:

1. Double-check your connect implementation #

The connect function from react-redux needs the second argument (mapDispatchToProps) to inject your action creators into props. You have two solid options here:

Option A: Use the object shorthand (simplest) #

If you pass an object of action creators directly to connect, it automatically binds them to dispatch for you:

import { connect } from 'react-redux';
import { UpdateInfo } from './your-actions-file';

class PersonalInfo extends React.Component {
  Registration2Submit(values) {
    this.props.UpdateInfo(values); // This should work now
  }
  // ... rest of your component
}

// Pass the action creator as an object to connect's second argument
export default connect(null, { UpdateInfo })(PersonalInfo);

Option B: Use a mapDispatchToProps function #

If you need more control (like custom logic before dispatching), define a function that returns an object bound to dispatch:

const mapDispatchToProps = (dispatch) => {
  return {
    UpdateInfo: (values) => dispatch(UpdateInfo(values))
  };
};

export default connect(null, mapDispatchToProps)(PersonalInfo);

Critical check: Make sure you're exporting the connect-wrapped component, not the raw class component. It's easy to accidentally export the original class instead of the connected version!

2. Ensure your component is inside the Redux Provider #

Your component can only access the Redux store if it's nested under the <Provider> component in your app's root. Double-check your root component setup:

import { Provider } from 'react-redux';
import store from './your-store-file';
import PersonalInfo from './PersonalInfo';

ReactDOM.render(
  <Provider store={store}>
    {/* All components using connect must be inside this Provider */}
    <PersonalInfo />
  </Provider>,
  document.getElementById('root')
);

If your component is outside the Provider, connect can't inject anything into this.props, leading to undefined values.

3. Verify your action creator and store middleware (if using async actions) #

When you call UpdateInfo(values) directly and nothing happens, it means your action creator is just returning an action object—but not dispatching it. Here's what to check:

For sync actions #

Your action creator should be a pure function that returns an action object:

// your-actions-file.js
export const UpdateInfo = (values) => {
  return {
    type: 'UPDATE_INFO',
    payload: values
  };
};

For async actions (e.g., API calls) #

If you're using async logic, you need middleware like redux-thunk to let action creators return functions (instead of just objects). First, make sure your store is configured with thunk:

// your-store-file.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './your-reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

Then your async action creator should look like this:

export const UpdateInfo = (values) => {
  return (dispatch) => {
    // Async work here (e.g., API call)
    fetch('/api/update-user-info', {
      method: 'POST',
      body: JSON.stringify(values)
    })
    .then(res => res.json())
    .then(data => {
      dispatch({ type: 'UPDATE_INFO_SUCCESS', payload: data });
    })
    .catch(err => {
      dispatch({ type: 'UPDATE_INFO_FAILURE', payload: err });
    });
  };
};

4. Fix this binding in your component method #

If your Registration2Submit method is a regular function in a class component, this might not be pointing to the component instance—making this.props undefined. Fix this in one of two ways:

Option A: Bind in the constructor #

class PersonalInfo extends React.Component {
  constructor(props) {
    super(props);
    // Bind the method to the component instance
    this.Registration2Submit = this.Registration2Submit.bind(this);
  }

  Registration2Submit(values) {
    this.props.UpdateInfo(values);
  }
}

Option B: Use an arrow function for the method #

Arrow functions automatically bind this to the component instance:

class PersonalInfo extends React.Component {
  // Use arrow function syntax
  Registration2Submit = (values) => {
    this.props.UpdateInfo(values);
  }
}

5. Debug with console logs #

Add a console.log(this.props) at the start of Registration2Submit to see what's actually in props. If:

• dispatch is missing: Your component isn't connected to the store (check Provider/connect steps).
• UpdateInfo is missing: Your mapDispatchToProps is misconfigured.
• this is undefined: Fix the this binding in your method.

内容的提问来源于stack exchange，提问作者a.cet