Question

我收到以下错误，但我返回一个根元素：

Route.render（）：必须返回有效的React元素（或null）。您可能已经返回undefined，数组或其他一些无效对象。

调度不是函数

我的代码：

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

Answer 1

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

我认为您的组件应该具有状态isLoading，以便在身份验证操作完成之前向用户显示内容。当isLoading为真时，您应该显示加载指示符否则，您应该显示与auth成功或失败相关的其他组件。

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

注意：我将使用react组件状态系统而不是Redux，因为我对你的redux状态树了解不多。随意尝试将其转换为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} />)} />

Route.render（）：必须返回有效的React元素（或null）

1 个答案: