1

我正在构建一个带有登录模式的 React/Redux 应用程序，当用户导航到/user/signin. 在页面组件加载之前，调度一个动作以设置isModalOpen为 true。
模态组件connect用于将模态状态映射到道具。但是，当页面加载时，模态组件似乎正在接收来自父页面组件的调度更新之前的模态状态。我尝试将isModalOpen向下作为页面组件的道具传递，当我导航到路线时，它会正确显示模式。除非我通过 modal 组件调度一个动作以设置isModalOpen为 false 并关闭 modal ，否则父组件上的 props 不会更新，因此 modal 保持关闭状态。

这是我正在使用的代码：

用户登录页面组件

class UserSignInPage extends React.Component {
  componentWillMount() {
    this.props.openModal()
  }

  componentWillUnMount() {
    this.props.closeModal()
  }

  render() {
    const { location, isModalOpen } = this.props
    return (
      <StackedMenuTemplate header={<Header />} menu={<Navigation />} footer={<Footer />}>
        <Overview />
        <SignInForm redirectTo={location.query.redirect} isModalOpen />
      </StackedMenuTemplate>
    )
  }
}

UserSignIn.propTypes = {
  isModalOpen: PropTypes.bool,
  location: PropTypes.object,
  openModal: PropTypes.func.isRequired,
  closeModal: PropTypes.func.isRequired,
}

const mapStateToProps = (state) => ({
  isModalOpen: isOpen(state, 'LOGIN'),
})

const mapDispatchToProps = (dispatch) => ({
  openModal: () => {
    dispatch(modalShow('LOGIN'))
  },
  closeModal: () => {
    dispatch(modalHide('LOGIN'))
  },
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserSignIn)

用户登录模态容器

const handleSubmit = (values, dispatch) => {

})

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isSignedIn,
  isModalOpen: isOpen(state, 'LOGIN'),
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  handleLogout: () => {
    dispatch(logout())
  },
  handleRedirect: () => {
    dispatch(push(ownProps.redirectTo || '/'))
  },
  handleModalClose: () => {
    dispatch(modalHide('LOGIN'))
  },
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({
    form: 'UserSignIn',
    onSubmit: handleSubmit,
  })(Form)
)

用户登录表单组件

class UserSignInForm extends Component {
  componentWillMount() {
    this.props.handleLogout()
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.isAuthenticated && nextProps.isAuthenticated) { // true after successful submit
      this.props.handleRedirect()
    }
  }

  shouldComponentUpdate(nextProps) {
    if (this.props.isModalOpen === nextProps.isModalOpen) {
      return false
    }
  }

  render() {
    const { handleSubmit, isModalOpen, handleModalClose } = this.props

    return (
      <Modal open={isModalOpen} onClose={handleModalClose} closeIcon='close'>
        <Modal.Header content='Sign In' />
        <Form onSubmit={handleSubmit}>
          <Modal.Content>
            <Form.Field>
              <label>Email</label>
              <Field name='email' component={Input} type='email' />
            </Form.Field>
            <Form.Field>
              <label>Password</label>
              <Field name='password' component={Input} type='password' />
            </Form.Field>
          </Modal.Content>
          <Modal.Actions>
            <Button type='submit'>
            Sign In
          </Button>
          </Modal.Actions>
          <div>
            <Link to='/user/forgot-password' >
              Forgot Password?
            </Link>
          </div>
        </Form>
      </Modal>
    )
  }
}

UserSignInForm.propTypes = {
  isModalOpen: PropTypes.bool,
  handleModalClose: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
  handleLogout: PropTypes.func.isRequired,
  handleRedirect: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
}

export default UserSignInForm
4

1 回答 1

0

我最终解决了这个问题。我从选择器中错误地获取了状态。

哎呀！

于 2017-05-09T00:23:25.870 回答