Javascript React类组件和React功能组件在redux存储更改后访问道具的差异

我很难理解为什么在基于类的组件和功能组件中，相同的步骤会产生不同的结果。下面我举了一个例子来说明这种差异

   class Test extends Component {
      handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
 
            await this.props.saveUserDetailsAction(values);

            const { error } = this.props; // expected modified prop 

            if (!error.status) {
              this.props.router.push("/route");
            } 
        });
      };
    }

const mapStateToProps = ({ app }) => ({
 error: app.error
});

const mapDispatchToProps = {
  saveUserDetailsAction,
};

export default compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Test);

类组件中的当前错误属性反映了异步函数saveUserDetailsAction完成后redux存储区中的更改，在本例中，如果请求失败，则调度操作

在saveUserDetailsAction函数显示更新的道具后访问错误道具

作为功能组件编写的相同代码不会产生相同的结果。在saveUserDetailsAction函数完成后访问error prop不会反映存储中的更改

  const Test = (props) => {
      const handleSubmit = e => {
        e.preventDefault();
        props.form.validateFields(async (err, values) => {     

            await props.saveUserDetailsAction(values);

            const { error } = props;  // unchanged prop when accessed here

            if (!error.status) {
              props.router.push("/route");
            }
        });
      };
    }

const mapStateToProps = ({ app }) => ({
 error: app.error
});

const mapDispatchToProps = {
  saveUserDetailsAction,
};

export default compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Test);

---

在我看来，这是一个反模式，你需要等待另一个周期来获得正确的错误道具。功能组件是正确的行为。 您需要做的是在此处找到返回错误的方法：

const { error } = await props.saveUserDetailsAction(values);

Redux存储错误变量仍可在其他组件中使用

---

另一种方法是使用

useffect（（）=>{}，[error]）

并区分3种状态“尚未提交”、“未提交错误”、“提交错误”，但我不建议这样做

在我看来，这是一种反模式，您需要等待另一个周期才能获得正确的错误道具。功能组件是正确的行为。 您需要做的是在此处找到返回错误的方法：

const { error } = await props.saveUserDetailsAction(values);

Redux存储错误变量仍可在其他组件中使用

另一种方法是使用

useffect（（）=>{}，[error]）

并区分3种状态“尚未提交”、“未提交错误”、“已提交错误”，但我不推荐使用它