Question

我对反应和还原是相当陌生的，但是我已经与Angular / Vue合作了一段时间。

我有一个组件，该组件的内部状态可以跟踪在模式上设置is-active类的情况。该模式中有一种形式，该形式将使用redux-thunk中间件发出AJAX请求。我需要知道此AJAX请求何时/是否成功，如果成功，则关闭模式（删除is-active类）。

我当时正在考虑将该组件设为fully controlled组件，但这意味着将其放在redux存储中以在成功的AJAX请求上设置状态。

我还看到componentWillReceiveProps已被弃用，显然是一个反模式，我真的不想在我的应用程序中使用反模式。还有其他方法可以执行此方案吗？任何帮助表示感谢！

Answer 1

您应该使用新的静态方法getDerivedStateFromProps，可以执行以下操作（确保您使用的是react: ^16.3.0）：

state = { is_active: false, _is_active: false }

static getDerivedStateFromProps(nextProps, current_state) {
  // you can should set isOpen via a props
  // so based on your ajax call you can set this to false
  let { isOpen } = nextProps;
  if (isOpen !== current_state._is_active) {
    return {
      _is_active: isOpen,
      is_active: isOpen
    }
  }
  return { _is_active: false }
}

然后，您可以将模式设置为通过this.state.is_active在内部关闭或通过isOpen道具在外部显示和关闭

根据道具更新内部状态（反模式）

1 个答案: