基于道具更新内部状态（反模式）

Posted 2021-04-18

我很反应和还原，但我已经和Angular / Vue一起工作了一段时间。

我有一个内部状态的组件来跟踪在模态上设置is-active类。这个模式上有一个表单，它将使用redux-thunk中间件发出AJAX请求。我需要知道这个AJAX请求何时成功，如果是，请关闭模态（删除is-active类）。

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

我也看到componentWillReceiveProps被弃用了，显然是一种反模式，我真的不想在我的应用程序中使用反模式。还有其他方法可以做到这种情况吗？任何帮助表示赞赏!!

答案

你应该使用新的静态方法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 prop在外部显示和关闭