У меня проблема, и мне интересно, что случилось. Мой код работает нормально, и я меняю значения состояния с помощью хуков. Хотя все в порядке, на моей консоли я сталкиваюсь с предыдущим значением состояния при первом нажатии кнопки. Когда я нажимаю кнопку второй раз, значения состояния начинают приходить правильно. По мнению Хуков, это логично или я что-то упустил?
Мой пример Login.tsx:
import React, { useState, useContext, useEffect } from 'react';
import { Input, Button, DropDownMenu, Checkbox } from 'oneframe-react';
import { useTranslation } from 'react-i18next';
export const LoginPart = (props: any) => {
interface IState {
pageLanguage: any;
email: string;
password: string;
rememberMeCheck: boolean;
}
const initialState: IState = {
email: '',
password: '',
pageLanguage: '',
rememberMeCheck: false,
};
const [leftPartState, setState] = useState<any>(initialState);
const { t, i18n } = useTranslation();
const handleChange = (e: any) => {
setState((prevState: any) => ({
...prevState,
[e.target.name]: e.target.value,
}));
};
const handleCheckBoxChange = (e: any) => {
setState( (prevState : any) => ({
...prevState,
[e.target.name]: e.target.checked,
}));
};
const handleSubmit: any = (e: Event) => {
// fallowing code changes values but console situations are like :
// {email: "", password: "", pageLanguage: "", rememberMeCheck: false} -> first click and print
// {email: "", password: "", pageLanguage: "eng", rememberMeCheck: true} -> second click and print
setState({...leftPartState, email: '', password: '',rememberMeCheck:true, pageLanguage : localStorage.getItem("userlanguage")})
e.preventDefault();
console.log(leftPartState)
}
const handleClick : any = (selectedlang: any) => {
leftPartState.pageLanguage = selectedlang.Name
setState({...leftPartState, pageLanguage :leftPartState.pageLanguage })
i18n.changeLanguage(selectedlang.Name)
localStorage.setItem("userlanguage", selectedlang.Name)
}
useEffect(() => {
},[leftPartState])
const renderLoginPart = () => {
return (
<div className="render-login-part-container">
<form onSubmit={() => handleSubmit(event)}>
<DropDownMenu
className="select-language"
fullWidth={false}
options={{
data: [
{
Name: 'tr',
Id: 1,
},
{
Name: 'eng',
Id: 2,
}
],
displayField: 'Name',
displayValue: 'Id',
selected: 1
}}
onClick={(event : Event) => handleClick(event)}
/>
<Input
id="basicInput"
name="email"
caption={t('email')}
type="text"
onChange={handleChange}
value={leftPartState.email}
rightAdornments={() => {
return <i className="fal fa-envelope mr-1"></i>;
}}
className="login-input"
/>
<Input
id="basicInput"
name="password"
caption={t('password')}
type="password"
onChange={handleChange}
value={leftPartState.password}
rightAdornments={() => {
return <i style={{ cursor: "pointer" }} className="far fa-eye-slash"></i>;
}}
className="login-input mt-2"
/>
<div className="container">
<div className="row rememberme-and-forgotpassword-container">
<div>
{/* Not: Checked özelliği ayarlanmalı */}
<Checkbox
id={'rememberMeCheck'}
name={'rememberMeCheck'}
label={t("rememberMe")}
checked={leftPartState.rememberMeCheck?true:false}
onChange={handleCheckBoxChange}
className="rememberme-checkbox"
/>
</div>
<div>
<p className="forgot-password-text">{t("forgotPassword")}</p>
</div>
</div>
</div>
<Button
type="submit"
text={t("login")}
variant={'text'}
className={'custom-style-text-button'}
fullWidth
/>
</form>
</div>
)
}
return (
<span>
{renderLoginPart()}
</span>
)
}
export default connect((store: any) => ({ oneframe: store }))(LoginPart) as any;