Javascript 还原程序更新状态时未发生路由重定向
我收到一个使用减缩器的用户模型。第一个值为null(因为这是reducer的行为方式——这意味着它处于挂起状态,尚未收到模型),第二个值是用户模型本身 当我得到第一个空值时,组件重定向到“IsNotSetUp”路径,但当我得到第二个值时,组件将isUserSetUp道具显示为TRUE,但它不会重定向到“IsSetUp”路径?发生了什么事Javascript 还原程序更新状态时未发生路由重定向,javascript,reactjs,react-native,react-router,reducers,Javascript,Reactjs,React Native,React Router,Reducers,我收到一个使用减缩器的用户模型。第一个值为null(因为这是reducer的行为方式——这意味着它处于挂起状态,尚未收到模型),第二个值是用户模型本身 当我得到第一个空值时,组件重定向到“IsNotSetUp”路径,但当我得到第二个值时,组件将isUserSetUp道具显示为TRUE,但它不会重定向到“IsSetUp”路径?发生了什么事 类应用程序扩展组件{ 状态={isUserSetUp:false} 组件将接收道具(下一步){ if(nextrops.auth&&nextrops.auth
类应用程序扩展组件{
状态={isUserSetUp:false}
组件将接收道具(下一步){
if(nextrops.auth&&nextrops.auth.isProfileSetUp){
this.setState({isUserSetUp:true},function()){
log(“这是我们从reducer接收用户模型的时候”);
});
}
否则{
this.setState({isUserSetUp:false});
}
}
componentDidMount(){
this.props.fetchUser();
}
render(){
返回(
{/*配置文件设置*/}
(
是this.state.isUserSetUp吗(
) : (
)
)}
/>
);
}
};
怎么了?什么是变通办法?我选择了哪条更好的建议路线
先谢谢你,美女;) 您可以使用
hashHistory
来实现此功能
导入{
哈希历史
}来自“反应路由器”;
/**
*[应用程序的更新路径]
*@param{String}route[应用程序的新路由]
*/
常量updateRoute=(路由)=>{
hashHistory.push(路径);
};
updateRoute('/IsSetUp')代码>
您可以使用hashHistory
来实现此功能
导入{
哈希历史
}来自“反应路由器”;
/**
*[应用程序的更新路径]
*@param{String}route[应用程序的新路由]
*/
常量updateRoute=(路由)=>{
hashHistory.push(路径);
};
updateRoute('/IsSetUp')代码>
您是否希望组件在渲染时重定向
组件?预期:当第二个道具进入时,将触发render(),重定向将相应地将用户推到/IsSetUp或/IsNotSetUp。所以是的,当它呈现
时,它应该重定向。我不知道为什么不是。这也是整个代码片段!我认为重定向组件不会自动重定向。它将创建一个链接,单击该链接将重定向。不,不会创建一个向UI公开的链接,以便用户可以单击它。假设它会自动重定向用户。您是否希望组件在呈现时重定向
组件?预期:当第二个道具出现时,会触发render(),重定向会相应地将用户推到/IsSetUp或/IsNotSetUp。所以是的,当它呈现
时,它应该重定向。我不知道为什么不是。这也是整个代码片段!我认为重定向组件不会自动重定向。它将创建一个链接,单击该链接将重定向。不,不会创建一个向UI公开的链接,以便用户可以单击它。假设它会自动重定向用户。不,运气不好。我还想了解问题背后的原因——为什么第二个值没有注册任何路由触发器?不,没有运气。我还想了解问题背后的原因——为什么第二个值不注册任何路由触发器?
class App extends Component {
state = { isUserSetUp: false }
componentWillReceiveProps(nextProps) {
if (nextProps.auth && nextProps.auth.isProfileSetUp) {
this.setState({ isUserSetUp: true }, function() {
console.log("This is when we receive the User model from the reducer");
});
}
else {
this.setState({ isUserSetUp: false });
}
}
componentDidMount() {
this.props.fetchUser();
}
render() {
return (
<div className="container">
<BrowserRouter>
<div>
<Header />
<Route exact path="/" component={Landing} />
<Route exact path="/dashboard" component={Dashboard} />
{/* Profile Set up */}
<Route exact path="/setup" render={() =>
(
this.state.isUserSetUp ? (
<Redirect to={'/IsSetUp'} />
) : (
<Redirect to={'/IsNotSetUp'} />
)
)}
/>
</div>
</BrowserRouter>
</div>
);
}
};