接收新Props时如何正确setState？解决componentWillUpdate警告问题

首先，你遇到的警告核心原因有两个：一是**componentWillUpdate是React已标记为不安全的生命周期方法**，它可能在组件即将卸载时仍被触发，导致在未挂载的组件上调用setState；二是你没有判断组件是否处于挂载状态就直接调用setState。

一、问题根源拆解 #

componentWillUpdate会在组件即将更新前触发，但如果在这个过程中组件因为某些原因（比如路由跳转、父组件卸载）已经被卸载，此时执行setState就会触发你看到的警告。而且React从v16.3开始就不推荐使用这个生命周期，因为它可能导致竞态条件和不可预测的更新。

二、类组件的正确实现方式 #

方案1：使用componentDidMount + componentDidUpdate（推荐，逻辑直观）

这是最常用的替代方案，通过对比前后props的变化，避免不必要的更新，同时确保组件只有在挂载状态下才执行更新：

class YourComponent extends React.Component {
  _isMounted = false; // 标记组件是否挂载

  constructor(props) {
    super(props);
    this.state = {
      returnItems: []
    };
  }

  componentDidMount() {
    this._isMounted = true;
    // 首次渲染时初始化state
    this.updateReturnItems(this.props.returnItems);
  }

  componentDidUpdate(prevProps) {
    // 只有当props确实变化时才更新state
    if (prevProps.returnItems !== this.props.returnItems && this._isMounted) {
      this.updateReturnItems(this.props.returnItems);
    }
  }

  componentWillUnmount() {
    this._isMounted = false; // 组件卸载时标记为未挂载
  }

  // 提取公共逻辑，避免重复代码
  updateReturnItems = (items) => {
    const returnItems = items.map(item => ({ 
      id: item.id, 
      selected: false, 
      quantity: 1, 
    }));
    this.setState({ returnItems });
  }

  render() {
    // 组件渲染逻辑
    return (
      // ...
    );
  }
}

方案2：使用getDerivedStateFromProps（React官方推荐的props转state方式）

这是React专门为props到state转换设计的静态生命周期方法，它在render前触发（包括首次渲染和props更新），且不会在组件卸载后执行，从根源避免了未挂载组件调用setState的问题：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      returnItems: props.returnItems.map(item => ({ 
        id: item.id, 
        selected: false, 
        quantity: 1, 
      })),
      prevReturnItems: props.returnItems // 存储上一次的props用于对比
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比当前props和上一次存储的props，判断是否需要更新state
    if (nextProps.returnItems !== prevState.prevReturnItems) {
      return {
        returnItems: nextProps.returnItems.map(item => ({ 
          id: item.id, 
          selected: false, 
          quantity: 1, 
        })),
        prevReturnItems: nextProps.returnItems
      };
    }
    return null; // 返回null表示不更新state
  }

  render() {
    // 组件渲染逻辑
    return (
      // ...
    );
  }
}

三、更优实现：函数组件+useEffect #

如果你正在使用React函数组件，这个方案会更简洁优雅，React会自动处理组件卸载后的清理，完全避免警告：

import { useState, useEffect } from 'react';

function YourComponent({ returnItems }) {
  const [localReturnItems, setLocalReturnItems] = useState([]);

  // 监听returnItems的变化，自动更新本地state
  useEffect(() => {
    const newItems = returnItems.map(item => ({ 
      id: item.id, 
      selected: false, 
      quantity: 1, 
    }));
    setLocalReturnItems(newItems);
  }, [returnItems]); // 只有当returnItems变化时才执行effect

  // 组件渲染逻辑
  return (
    // ...
  );
}

四、额外注意事项 #

• 尽量避免将props直接复制到state：如果你的returnItems不需要本地修改，完全可以直接使用props，不需要存到state里，这样能减少状态同步的复杂度。
• 如果必须存到state，一定要确保只有props真正变化时才更新，避免无限循环或不必要的重渲染。

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