React 类组件和 React 功能组件更改 redux store 后访问 props 的区别

Posted 2023-03-16

【中文标题】React 类组件和 React 功能组件更改 redux store 后访问 props 的区别

【英文标题】：Difference in accessing props after change in redux store between React class component and React functional component

【发布时间】：2020-11-27 13:05:26

【问题描述】：

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

   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 函数显示更新后的 props 后访问错误 props。

编写为功能组件的相同代码不会产生相同的结果。在 saveUserDetailsAction 函数完成后访问 error 属性并不能反映 store 中的变化。

  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);

【参考方案1】：

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

const  error  = await props.saveUserDetailsAction(values);

Redux 存储错误变量仍然可以在另一个组件中使用

其他方法是使用 useEffect(() => , [error]) 并区分 3 种状态“​​尚未提交”、“提交时没有错误”、“提交时出错”，但我不推荐它