Использование избыточного состояния внутри HO C в reactjs - PullRequest
Новая
       55

Использование избыточного состояния внутри HO C в reactjs

1 голос
/ 03 мая 2020

В моем приложении реакции у меня есть withAuth HO C, который проверяет, прошел ли пользователь аутентификацию перед загрузкой упакованного компонента. Он просматривает хранилище резервных копий для проверки статуса авторизации и загружает компонент, если isAuth имеет значение true. Тем не менее, я не могу получить доступ к магазину избыточности из HO C. при попытке получить следующее сообщение об ошибке в браузере. Любая помощь в преодолении этой проблемы высоко ценится.

enter image description here

с помощью Auth. js

import React, { useState, useEffect } from 'react';
import { setAuth } from '../actions/Actions';
import { connect } from 'react-redux';

function withAuth(WrappedComponent) {
    return (props) => {
        const [isAuth, setAuth] = useState(false);

        useEffect(() => {
            if (props.isAuth) {
                setAuth(true);
            } else {
                props.history.push('/catalog');
            }
        }, [props.history]);

    return isAuth ? <WrappedComponent {...props} /> : <p>Loading..</p>
    };
}

const mapStateToProps = (state) => {
    return {
        isAuth: state.isAuth,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setAuth: (status) => dispatch(setAuth(status)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(withAuth);

1 Ответ

1 голос
/ 03 мая 2020

Вы не можете передать HO C для подключения, вам нужно передать компонент функции: 

export default function withAuth(WrappedComponent) {
  const Component = (props) => {
    const [isAuth, setAuth] = useState(false);

    useEffect(() => {
      if (props.isAuth) {
        setAuth(true);
      } else {
        props.history.push('/catalog');
      }
    }, [props.history, props.isAuth]);//forgot dependency here

    return isAuth ? (
      <WrappedComponent {...props} />
    ) : (
      <p>Loading..</p>
    );
  };
  const mapStateToProps = (state) => {
    return {
      isAuth: state.isAuth,
    };
  };

  const mapDispatchToProps = (dispatch) => {
    return {
      setAuth: (status) => dispatch(setAuth(status)),
    };
  };

  return connect(
    mapStateToProps,
    mapDispatchToProps
  )(Component);
}
...