如何在React类组件方法中获取Redux最新props？

Hey there, I feel your pain—async state updates can be tricky to wrap your head around. Let's break down your questions one by one and fix this for you.

1. 如何在类方法中访问最新的props？ #

其实你根本不需要把Redux的props存到组件state里！Redux更新store后，会自动把最新的props传递给你的组件，你可以直接在任何类方法里通过this.props.pickupProps访问最新值——前提是你不要在dispatch action后立刻去拿它（因为Redux的state更新是异步的，props不会瞬间更新）。

如果需要在props更新后执行逻辑，推荐用componentDidUpdate生命周期监听变化：

componentDidUpdate(prevProps) {
  // 当pickupProps发生变化时，执行你需要的逻辑
  if (prevProps.pickupProps !== this.props.pickupProps) {
    console.log('最新的pickupProps:', this.props.pickupProps);
    // 这里可以放你需要基于最新props执行的代码
  }
}

2. 如何在类方法中访问通过nextProps设置的state值？ #

如果确实有特殊需求必须把props存到组件state（虽然不推荐），要记住setState是异步的——你不能在调用setState后立刻拿到更新后的state，必须用以下两种方式：

方法一：使用setState的回调函数 #

// 注意：componentWillReceiveProps已被React废弃，推荐改用componentDidUpdate
componentWillReceiveProps(nextprops) {
  if (nextprops.pickupProps !== undefined && nextprops.pickupProps !== this.props.pickupProps) {
    this.setState({ pick: nextprops.pickupProps }, () => {
      // 这个回调里的state是完全更新后的
      console.log('最新的pick state:', this.state.pick);
      // 你可以在这里调用需要使用最新state的方法
      this.handleLatestPickState();
    });
  }
}

handleLatestPickState() {
  console.log(this.state.pick); // 这里拿到的是最新值
}

方法二：在componentDidUpdate中监听state变化 #

componentDidUpdate(prevProps, prevState) {
  if (prevState.pick !== this.state.pick) {
    console.log('最新的pick state:', this.state.pick);
    // 执行你的业务逻辑
  }
}

3. 最优方案解决此问题 #

最优解就是完全去掉组件state，直接使用Redux传递的props，这样就彻底避免了同步问题。Redux的核心就是让组件从统一的store获取状态，而不是自己维护一份副本，既减少了冗余，也避免了异步更新带来的混乱。

修改你的组件代码，去掉冗余的state和废弃的生命周期：

import { connect } from "react-redux";
import * as actions from "../actions"

class Map extends React.Component {
  isPickEmpty(emptyPickState) {
    this.props.pickup(emptyPickState);
    // 不要在这里立刻拿最新props，因为Redux的更新是异步的
  }

  // 监听props变化，执行后续逻辑
  componentDidUpdate(prevProps) {
    if (prevProps.pickupProps !== this.props.pickupProps) {
      console.log('最新的pickupProps:', this.props.pickupProps);
      // 这里放你需要基于最新props执行的逻辑
    }
  }

  render() {
    // 直接在render里使用this.props.pickupProps，它永远是最新的
    return <div>当前pickup位置: {JSON.stringify(this.props.pickupProps)}</div>;
  }
}

const mapStateToProps = (state) => {
  return {
    pickupProps: state.BookingData.pickup,
    pickupAddProps: state.BookingData.pickupAdd
  }
}

export default connect(mapStateToProps, actions)(Map);

另外要注意：componentWillReceiveProps已经被React官方废弃，后续如果需要处理props变化，优先使用componentDidUpdate，尽量避免使用派生state（把props存到组件state的做法）。

这样修改后，所有状态都由Redux统一管理，组件只负责接收props并渲染，逻辑更清晰，也不会再出现异步更新的困扰。

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