1

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

   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属性并不能反映 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);
4

1 回答 1

0

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

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

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

其他方法是使用 auseEffect(() => {}, [error])并区分 3 个状态“尚未提交”、“已提交且没有错误”、“已提交但有错误”，但我不推荐它

于 2020-08-07T08:31:02.370 回答