Question

我正在使用React-router和redux构建一个React应用程序，并且只有在用户通过身份验证时，我才会在/profile显示一个配置文件页面。在我的App组件的componentWillMount方法中，我使用fetchUser()获取当前用户，该axios使用GET request向我的Express API发送fetchUser()。我的null默认返回false，并在请求完成时返回user object或Profile。在我的null组件中，我正在尝试切换用户（false，user which should be truthy或fetchUser()）。我面临的问题是我的交换机案例在<{em> null请求发出之前被称为，因此用户是render() { if (this.props.auth === false) this.props.history.push('/'); return ( <div className="profile-page"> //Profile page goes here </div> ) }。以下代码完成了工作，但chrome在控制台中抛出错误：

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

chrome抛出的错误：

render

只是为了澄清：代码完美无缺，但Chrome仍然抱怨。我意识到这意味着我需要将我的逻辑从componentWillMount方法转移到componentDidMount或\t。问题是，当调用那些生命周期方法时，用户对象为null，因此不起作用（我已经尝试过）。有没有人有任何想法？提前谢谢！

Answer 1

将逻辑添加到componentDidUpdate（）生命周期方法中解决了这个问题：

XMLHttpRequest

Answer 2

正如您已正确观察到，render方法不应包含任何切换状态/重新路由的逻辑。

如果你的fetchUser函数是asyc，那么你应该只根据fetchUser的响应渲染组件。

componentWillMount(){
      this.setState({loading:true})
      fetchUser().then( () =>{this.setState({auht:true,loading:false)}) 
            .catch( ()=>{this.setState({auth:false,loading:false})})
}

现在基于 this.state.loading ，您可以在渲染中做出一些决定。

希望这有效。

如果用户未经过身份验证，则使用React-router重定向

2 个答案: