【问题标题】：Update props without leaving function in React and Redux在 React 和 Redux 中更新 props 而不离开函数
【发布时间】：2017-07-12 12:40:30
【问题描述】：

我有简单的检查，当用户点击按钮时我必须这样做：

<button 
    onClick={() => {
        this.props.validatingActions.validate(this.props.Email.Value);
        this.props.submittingActions.submitValidation(this.props.Email.IsValid);
}}>Submit</button>

首先，Redux 存储中的电子邮件验证，然后，当电子邮件有效与否时，一些操作会验证。

问题是，this.props 在执行this.props.validatingActionsvalidate 后不会更新，它们只是在离开匿名onClick 函数后才更新，因此this.props.Email.IsValid 具有旧值。

在这种情况下如何正确更新道具？

【问题讨论】：

当用户更改电子邮件字段时，您为什么不调用验证？如果您担心性能，这可以是一个去抖函数。
因为这是一个简化的例子，我有很多这样的字段。去抖动是什么意思？
对一个函数进行去抖动是一种确保它不会被多次调用的方法——也就是说，点击一个按钮 5 次不会导致 5 次提交。你能发布你的 action creators 和 reducers 吗？
现在，我没有它们，但我明白它是什么。
存在问题是因为您同时调度了两个操作，这导致您当前的商店状态出现竞争条件。您可能需要使用一些中间件，例如 thunk 或 redux-saga，以便按照您希望的方式工作。

标签： javascript reactjs redux react-redux

【解决方案1】：

请注意，您不应该（在大多数情况下也不能）更改组件自己的道具。请查看此 SO answer 了解更多详情。

答案更新

另外请注意，React setState 是异步的，因此在调用 setState 后不会立即进行状态更改。因此，基于 state 的 props 也不会在 dispatch action 后立即更新。

当 prop 更新时，组件会重新渲染，如果您需要立即更改 prop 值，我认为组件渲染函数中不需要它，而是在其他地方决定是否执行其他操作。如果是这样，它应该在操作中处理：您可以使用redux-thunk 来调度异步或条件操作。

【讨论】：

我没有更改它们，我的组件道具由connect 库提供的connect 函数和'mapStateToProps' 函数管理，该函数负责将redux store 映射到组件道具。
在这种情况下，您应该分派一个操作来调用状态缩减器来更新您希望更改的值。您可以通过在connect 中使用mapDispatchtoProps 来完成这些操作，如stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops 所述
这就是我所做的，这是主要问题，我们不能在函数内部拥有新的 props 值，而不离开它。
这是预期的反应行为
好吧，当 props 更新时，组件会重新渲染，如果您需要立即更改 prop 值，我认为组件渲染函数中不需要它，但在其他地方可以决定是否执行某些操作。如果是这样，IMO 应该在操作中处理：您可以使用 redux-thunk 执行异步或条件操作。但是只看到一小部分代码就很难提供详细的解决方案

【解决方案2】：

当你想使用表单时，尝试使用 Redux-Form http://redux-form.com/6.5.0/examples/syncValidation/

【讨论】：

看起来不错，但由于大多数原因，我目前无法切换到这个库，那么，如何解决当前问题？
这是一个糟糕的建议，有两个原因。 Redux-Form 复杂而强大，在大多数情况下都不需要，而且它绝对不能回答当前的问题。

【解决方案3】：

改变道具不是解决问题的方法。您验证和提交的逻辑在哪里？直接在减速机里？要么在同一个动作上做两件事，要么使用副作用库一个接一个地做。无论如何，从动作的名称来看，我不明白你为什么要为此使用 redux 动作。验证输入对我来说听起来不像是状态变化。您应该使用一个简单的函数来验证它，并根据它是否正常，采取相应的行动（通过一个动作）。

【讨论】：