Route.render（）：有效的做出反应元素（或空）必须返回

问题描述：

我收到以下错误，虽然我回一个根元素：Route.render（）：有效的做出反应元素（或空）必须返回

Route.render（）：有效的做出反应元素（或null）必须返回。您可能返回了未定义的数组或其他一些无效的对象。

调度是不是一个函数

我的代码：

export var PrivateRoute = ({ component: Component, ...rest }) => { 

    return (
    <Route {...rest} render={props => { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user) { 
     console.log('ON...ON'); 
     var {dispatch} = props; 
     dispatch(actions.login(user.uid)); 
     dispatch(actions.startAddTodos()); 
     return(
      <Component {...props} /> 
     ) ; 

     } else { 
     console.log('OFF...OFF'); 

     dispatch(actions.logout()); 

     return (
      <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> 
     ); 

     } 
    }); 
    }} />); 
} 
export default Redux.connect()(PrivateRoute);

Github Link

你的回报是异步回调中，而不是直接返回功能正在'道具'作为论点 –

@MohammadElbanna：谢谢，你能否提出解决问题的方法，请 –

我发布了一个解决这个问题的建议。希望它有效！ –

答

我认为主要的问题是你在异步函数中返回UI。

我认为你的组件应该有一个状态isLoading向用户显示，直到认证操作完成。当isLoading为真时，您应该显示加载指示器否则，您应该显示与验证成功或失败相关的其他组件。

您还应该定义auth成功或失败的状态。

注：我打算用反应组件状态的系统，而不是终极版，因为我不知道很多关于你的终极版状态树。随意尝试将其转换为Redux

首先，您应该重构要在单独的类组件中路由到的组件。让我们称之为组件UserAuth

class UserAuth extends Component { 
    state = { 
    isLoading: true 
    isUserAuth: false 
    } 

    componentDidMount() { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user) { 
     this.setState({isLoading: false, isUserAuth: true}) 
     // the rest of your logic here 
     } 
     else { 
     this.setState({isLoading: false, isUserAuth: false}) 
     // the rest of your logic here 
     } 
    } 

    render() { 
    return (
     {this.state.isLoading && <LoadingIndicator /> } 
     {!this.state.isLoading && this.state.isUserAuth && <Component {...this.props} />} 
     {!this.state.isLoading && !this.state.isUserAuth && <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />} 
    ); 

    } 
}

其次，在你<Route>组件，你应该这样做：

<Route {...rest} render={props => (<UserAuth {...props} />)} />

ميرسيخالصيامحمد，أنالسهجديدفيالموضوعففيحاجاتكتيرمشواضحةبالنسبالي，كنتبتمنىيكونالتعديلعلىنفسالمثال，لانال '路由器V4' مختلفتمامافحسبالاقتراحاتاطلبانياعمل '重定向Component' فياللينك دا https://stackoverflow.com/a/46799951/418343 وحضرتكبتقولياعمل 新组件！即将发布。 –

العفوياباشا..اناحكملانجلشعشانلوحدممكنيستفيدبحاجة..قولليبسايهالليمشواضحواناافهمك（لوعارفيعني 我没有做太多，我只是重构你的代码。需要进行重构你的代码因为正如我所说你不能从异步回调中返回UI。您正在创建组件（并将其传递给属性），我所做的只是给它起了个名字并重构了它的代码。请注意，它是React.js的方式，通过组件始终创建可重用的代码。顺便说一下，PrivateRoute组件（在你发布的链接上）是保证路由安全的一个很好的抽象。 –

谢谢Mohammad，我会试试看:) –

Route.render（）：有效的做出反应元素（或空）必须返回

相关推荐