React类组件首次调用函数无法获取mapStateToProps传递的pickupProps问题

Let’s break down why you’re seeing undefined the first time your isPickEmpty function runs:

• When your component first mounts, it’s likely that state.BookingData.pickup in your Redux store hasn’t been populated yet. Even though render eventually gets the value, your custom function might execute before the Redux state updates and triggers a re-render with the correct props.
• The scriptLoader HOC could also be delaying full component initialization, causing the initial props from connect to not be available immediately when your function first runs.

Here are reliable fixes to ensure pickupProps is available on the first call:

1. Initialize Redux State with a Default Value #

Make sure your BookingData slice in Redux has a default value for pickup so it’s never undefined from the start. For example, in your reducer:

const initialState = {
  BookingData: {
    pickup: {} // Or use null/empty array based on your data type
  }
};

function yourReducer(state = initialState, action) {
  // ... your reducer logic
}

This ensures pickupProps will always have a valid default value instead of undefined, even before any actions update the state.

2. Add Guard Clauses in Your Custom Function #

Add a check at the start of isPickEmpty to handle the uninitialized state gracefully:

isPickEmpty() {
  // Exit early with a default behavior if pickupProps is missing
  if (!this.props.pickupProps) {
    return true; // Adjust this default return value to fit your use case
  }

  // Your existing logic here
  console.log(this.props.pickupProps);
  // ... rest of your function code
}

3. Trigger the Function After Props Are Ready #

If you need isPickEmpty to run only when pickupProps is actually available, use lifecycle methods to call it at the right time:

componentDidMount() {
  // Run on initial mount only if pickupProps is already present
  if (this.props.pickupProps) {
    this.isPickEmpty();
  }
}

componentDidUpdate(prevProps) {
  // Run when pickupProps transitions from undefined to a valid value
  if (!prevProps.pickupProps && this.props.pickupProps) {
    this.isPickEmpty();
  }
}

This ensures your function won’t execute until pickupProps is properly passed to the component.

4. Use Optional Chaining for Safe Property Access #

If you just want to avoid errors when accessing nested properties of pickupProps, use optional chaining (ES2020+):

isPickEmpty() {
  // Safely access nested properties without throwing errors
  const pickupLocation = this.props.pickupProps?.location;
  console.log(pickupLocation); // Returns undefined if pickupProps is missing, no crash
  // ... rest of your logic
}

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