gpt4 book ai didi

reactjs - 我们可以重定向到 reduxSaga 吗

转载 作者:行者123 更新时间:2023-12-03 18:44:56 24 4
gpt4 key购买 nike

我有一个带有 HOC 我传递组件的登录页面,必须在成功登录后呈现。

在这里,如果我检查 isLoggedIn 并在登录的渲染中重定向,那么我会收到错误

err: Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops



传奇.js
           try{//call api
//put login success
<Redirect to="/app"/>
}

索引.js
          const AuthProfile=requireAuth(App);

In reactdom
<Route render={(props)=><AuthProfile {...props}/>} path="/app"/>


import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { bindActionCreators } from 'redux';

export default function (ComposedComponent) {
class Authenticate extends React.Component {


componentDidMount() {
console.log("12ra")
this._checkAndRedirect();
}

componentDidUpdate() {
this._checkAndRedirect();
}

_checkAndRedirect() {
const { isLoggedIn, redirect } = this.props;

if (!isLoggedIn) {
redirect();
}
}

render() {
console.log("28ra")
return (
<div>
{ this.props.isLoggedIn ? <ComposedComponent {...this.props} /> : null }
</div>
);
}
}

const mapStateToProps = (state) => {
return {
isLoggedIn:state.signInReducer.isLoggedIn
};
};

const mapDispatchToProps = dispatch => bindActionCreators({
redirect: () => push('/')
}, dispatch)

//Authenticate.propTypes = propTypes

return connect(
mapStateToProps,
mapDispatchToProps
)(Authenticate);
}

HOC 组件是正确的还是我遗漏了什么?

在传奇中重定向是一种好习惯吗?

任何人都可以请让我知道成功后如何进入应用程序组件我被困在那里请帮助谢谢

更新

传奇.js
       yield put({type:LOGIN_SUCCESS,payload:data})
yield put(push('/app'))

索引.js

Ex for Page1,Page2 我需要
        <AuthRoute
exact
path="/"
component={Page1}
redirectTo="/login"
authenticated={this.props.isLoggegIn}
/>

<AuthRoute
exact
path="/"
component={Page2}
redirectTo="/login"
authenticated={this.props.isLoggegIn}
/>

最佳答案

以下是您可以从 saga 导航的方式:

saga.js

import { push } from 'react-router-redux';
...
// after API call & validate user
yield put(push('/app'));

index.js
 <Route strict exact path='/app' component={App}>
<AuthRoute
exact
path="/"
component={Yourcomponent}
redirectTo="/login"
authenticated={hasAccessToken()}
/>

关于reactjs - 我们可以重定向到 reduxSaga 吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56184152/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com