Реагируйте: Выполните функцию в использовании. Эффект Hook для обновления состояния. Используйте значение состояния для возврата компонента A или B - PullRequest
Новая
       7

Реагируйте: Выполните функцию в использовании. Эффект Hook для обновления состояния. Используйте значение состояния для возврата компонента A или B

0 голосов
/ 12 марта 2020

Когда пользователь прибывает в этот компонент. Я хочу выполнить две функции в хуке useEffect: - hasError (возвращает true при возникновении ошибки) - hasState (возвращает true при наличии состояния)

В зависимости от состояния, которое я хочу вернуть, указав c компонент. Если доступ неверен, чем Если он истинен, чем

Когда пользователь впервые заходит на страницу, он говорит, что доступ, если false, когда я обновляю sh страницу, это true Почему нет обновление состояния в первый раз?

Я использую неправильный метод жизненного цикла?

Компонент: 

const ContinueRouteComponent = () => {

    const dispatch = useDispatch();

    // const [access, setAccess] = useState(false);
    // const [error, setError] =  useState(false);


    const query = useQuery();

    //check if user has valid state
    const hasState = (stateId: string) => {
        // No state is given in the uri so no access

        if(stateId === null) {
            return false;
        }

        // You have a state in the uri but doesn't match the localstorage
        return localStorage.getItem(stateId) !== null;
    };

    const hasError = (error: string) => {
        return error !== null;
    };

    const [access, setAccess] = useState(() => hasState(query.get("state")));
    const [error, setError] =  useState(() => hasError(query.get("error")));


    useEffect(() => {
        dispatch(fetchResources());
    },[]);


    if(error){
        let errorType = query.get("error");
        let errorDescription = query.get("error_description");

        return <Redirect exact={true} to={{
            pathname: '/error',
            state: {
                error: errorType,
                description: errorDescription
            }
        }} />;
    }

    if(access){
        const retrievedStorage = JSON.parse(localStorage.getItem(query.get("state")));
        localStorage.removeItem(query.get("state"));
        return <Redirect exact to={retrievedStorage} />
    } else {
        return <Redirect to="/"/>
    }
};


export default ContinueRouteComponent

1 Ответ

1 голос
/ 12 марта 2020

При исходном состоянии доступа к рендеру - false

Вы устанавливаете состояние по умолчанию как false, это будет его значением при первом рендере. Затем, когда вы запускаете эффект setAccess(hasState(someValue));, он устанавливает доступ к true на следующем рендере.

Изменение состояния запускает повторное рендеринг с новым значением, но не прерывает текущий рендеринг.

Вы можете потратить больше времени на размышления о своей настройке, например, почему бы не инициализировать состояние значениями? 

const [access, setAccess] = useState(() => hasState(someValue));
const [error, setError] =  useState(() => hasError(someValue));
...