如何获得价值的第一次点击?

Question

我已经在这个项目的这一部分卡住了几天了，即使经过大量的研究，我仍然无法解决它，所以我需要得到一个变量，是在contextAPI，但它只更新到我需要的值在第二次点击，但它不是这个，我需要它在第一次点击

AuthContext.ts

import React, { createContext, useRef, useState } from "react"
import { api } from "../services/api"
import { setCookie } from 'nookies'
import Router from 'next/router';

type User = {
name?: string;
email?: string;
avatar_url?: string;
cpf: string;
password: string;
}
type Empresas = {
CODIGO: number;
RAZAO: string;
}

type SignInCredentials = {
cpf: string;
password: string;
empresa?: number;
}

type AuthContextType = {
signIn(data: SignInCredentials): Promise<void>;
user: User;
empresas: Empresas[];
count: number;
}
type ResponseProps = {
data: {
payload: Empresas[];
};
}
type ResponseUserProps = {
data: {
payload: {
token: string;
}
}
}

export const AuthContext = createContext({} as AuthContextType)
export function AuthProvider({ children }) {
const [count, setCount] = useState<number | undefined>()
const [user, setUser] = useState<User | null>(null);
const [empresas, setEmpresas] = useState<Empresas[]>([]);
async function signIn({ cpf, password, empresa }: SignInCredentials) {
setUser({
cpf: cpf,
password: cpf
})
if (!empresa) {
const response: ResponseProps = await api.post('/session', {
LOGIN: cpf,
SENHA: password
})
const empresas = response.data.payload;
setEmpresas(empresas);
setCount(empresas.length)
}
if (empresa) {
const response: ResponseUserProps = await api.post('/session', {
LOGIN: cpf,
SENHA: password,
EMPRESA: empresa
})
console.log(response.data)
const { token } = response.data.payload;
setCookie(undefined, '@allNube.token', token, {
maxAge: 60 * 60 * 24, // 24 hour
})
api.defaults.headers['Authorization'] = `Bearer ${token}`;
Router.push('/dashboard')
}
}
return (
<AuthContext.Provider value={{ signIn, user, empresas, count }}>
{children}
</AuthContext.Provider>
)
}

在这里我需要更新更新后的值在这个特定的例子中必须是2

export function Login() {
const { empresas, count } = useContext(AuthContext);
return (
<Button
onClick={() => {
console.log(count);
if (count > 1) {
onSelectCompanyDrawer();
}
Router.push("/dashboard");
}}
w="200px"
h="48px"
mb="4"
type="submit"
>
Acessar
</Button>
);
}

一些灯吗?

Answer 1

export function Login() {
const { empresas, count } = useContext(AuthContext);
const [cpf, setCpf] = useState('');
const [password, setPassword] = useState('')
const { onOpen, isOpen, onClose } = useDisclosure()
const { onOpen: onForgetModal, isOpen: isForgetModal, onClose: onCloseForgetModal } = useDisclosure();
const { onOpen: onForgetDrawer, isOpen: isForgetDrawer, onClose: onCloseForgetDrawer } = useDisclosure();
const { onOpen: onSelectCompanyDrawer, isOpen: isSelectCompanyDrawer, onClose: onCloseSelectCompanyDrawer } = useDisclosure();
const { signIn } = useContext(AuthContext);
const [isLargerThan720] = useMediaQuery("(min-width: 720px)")
const { register, handleSubmit } = useForm()
const { control, handleSubmit: handleCompany } = useForm()

async function handleSignIn({ cpf, password, }: dataProps) {
const cpfFormatted = (cpf.replace(/D+/g, '')).toString();
const data = {
cpf: cpfFormatted,
password,
}
setCpf(cpfFormatted);
setPassword(password);
signIn(data);
}
async function handleSelectCompany({ company }: companyProps) {
let companyInt = Number(company)
const data = {
cpf: cpf,
password: password,
empresa: companyInt
}
console.log(data)
signIn(data);
}
return (
<Button
onClick={() => {
console.log(count)
if (count > 1) {
onSelectCompanyDrawer();
}
Router.push('/dashboard')
}}
w="200px"
h="48px"
mb="4"
type="submit"
>Acessar</Button>

Answer 2

如果有人经历过类似的事情，我的解决方案是

useEffect(() => {
console.log(empresas.length)
if (empresas.length > 1) {
onSelectCompanyDrawer()
}
}, [empresas])

在登录页面，我做了一个useEffect和一个if打开模态，而不是在按钮上，因为它是之前