React：执行 useEffect Hook 中的函数来更新状态。使用状态值 return 组件 A 或 B

Question

当用户到达此组件时。我想在 useEffect 挂钩中执行两个函数： - hasError（return如果有错误则为真） - hasState（return如果有状态则为真）

基于我想要 return 特定组件的状态。如果访问是错误的如果是真的比

用户第一次访问该页面时它说访问 if false 当我刷新页面时它是 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

Answer 1

初始呈现访问状态为 false

您将默认状态设置为 false，这将是它在第一次渲染时的值。然后，当您触发效果 setAccess(hasState(someValue)); 时，它会将访问设置为在下一次渲染时为真。

状态更改会触发使用新值重新渲染，但不会中断当前渲染。

您可能会花更多时间思考您的设置，例如，为什么不使用值初始化状态？

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

React：执行 useEffect Hook 中的函数来更新状态。使用状态值 return 组件 A 或 B

React: Execute function in useEffect Hook to update state. Use the state value to return component A or B

lifecycle

reactjs

react-router

react-hooks

初始呈现访问状态为 false