React项目中componentWillReceiveProps被调用两次问题求助

Hey there, let's figure out why your componentWillReceiveProps method is getting called twice in your MessagesList component. I’ve dealt with this exact issue a few times, so let’s break down the most likely causes and fixes step by step.

1. You’re Using Old Props Instead of nextProps in the Method #

Looking at your code snippet, I spotted a critical mistake right away: you’re setting state using this.props.user.messages instead of the nextProps parameter passed to componentWillReceiveProps.

The whole point of componentWillReceiveProps is to react to upcoming props, not the current ones you already have. Using this.props here doesn’t just give you stale data—it can also trigger unnecessary re-renders that loop back and call the method again.

Fix this first by updating your code:

componentWillReceiveProps(nextProps) {
  // Use nextProps instead of this.props to get the latest incoming data
  this.setState({ messages: nextProps.user.messages });
  // Rest of your logic...
}

2. Parent Component is Re-Rendering Unnecessarily #

If the parent component of MessagesList re-renders (even if the props passed to MessagesList don’t actually change), React will still trigger componentWillReceiveProps by default (since shouldComponentUpdate returns true for regular Component classes).

To check this:

• Add a console.log('Parent re-rendered') in the parent component’s render method to see if it’s firing twice.
• If it is, optimize the parent with shouldComponentUpdate or switch to React.PureComponent (which does shallow prop/state comparison automatically). For your MessagesList component, you can also add a check to prevent redundant updates:

  shouldComponentUpdate(nextProps) {
    // Deep compare messages array to avoid unnecessary re-renders
    return JSON.stringify(nextProps.user.messages) !== JSON.stringify(this.props.user.messages);
  }
  

  Note: For performance-critical apps, consider using immutable data structures (like Immer or Immutable.js) instead of JSON.stringify for faster comparisons.

3. Your init_message() Action is Triggering Multiple State Updates #

You’re calling this.props.init_message() in componentWillMount. If this action is making an asynchronous request (like fetching messages from an API), it might be getting dispatched twice, leading to two prop updates.

Check for these scenarios:

• Is init_message() being called in another lifecycle method or component (like the parent’s componentDidMount)?
• Does the action/reducer have logic that’s accidentally updating the state twice (e.g., duplicate API callbacks)?
• Add a console.log('init_message dispatched') inside your action creator to confirm it’s only firing once.

4. React Strict Mode is Causing Duplicate Calls (Development Only) #

If your app is wrapped in <React.StrictMode> (common in create-react-app projects), React intentionally duplicates calls to certain lifecycle methods (including componentWillReceiveProps) in development mode. This is a feature to help you catch side effects that might cause bugs in production.

To verify:

• Look at your root component (usually index.js). If you see <React.StrictMode> around your app, this is the cause. The duplicate calls won’t happen in a production build, so you don’t need to fix anything here—it’s just React helping you write safer code.

Quick Recap of Steps to Fix #

1. Fix the nextProps vs this.props mistake in componentWillReceiveProps.
2. Check if the parent component is re-rendering unnecessarily and optimize it.
3. Verify that init_message() is only being dispatched once.
4. Rule out React Strict Mode as the cause if you’re in development.

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