Reactjs 再次单击并更改状态值
我有个问题，不知道发生了什么。我的代码运行良好，我用钩子更改状态值。虽然一切正常，但在我的控制台中，我在第一次单击按钮时会遇到上一个状态值。当我第二次单击按钮时，状态值开始正确出现。根据胡克斯的说法，这是合乎逻辑的还是我遗漏了什么 我的示例Login.tsx：Reactjs 再次单击并更改状态值,reactjs,react-hooks,Reactjs,React Hooks,我有个问题，不知道发生了什么。我的代码运行良好，我用钩子更改状态值。虽然一切正常，但在我的控制台中，我在第一次单击按钮时会遇到上一个状态值。当我第二次单击按钮时，状态值开始正确出现。根据胡克斯的说法，这是合乎逻辑的还是我遗漏了什么 我的示例Login.tsx： import React, { useState, useContext, useEffect } from 'react'; import { Input, Button, DropDownMenu, Checkbox } from '
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;
import React，{useState，useContext，useffect}来自“React”；
从“oneframe react”导入{输入，按钮，下拉菜单，复选框}；
从“react-i18next”导入{useTranslation}；
导出常量LoginPart=（道具：任意）=>{
界面状态{
页面语言：任意；
电子邮件：字符串；
密码：字符串；
记忆检查：布尔；
}
常量初始状态：IState={
电子邮件：“”，
密码：“”，
页面语言：“”，
记住检查：false，
};
常量[leftPartState，setState]=使用状态（initialState）；
const{t，i18n}=useTranslation（）；
常量handleChange=（e:any）=>{
设置状态（（prevState:any）=>({
…国家，
[e.target.name]：e.target.value，
}));
};
const handleCheckBoxChange=（e:any）=>{
设置状态（（prevState:any）=>({
…国家，
[e.target.name]：e.target.checked，
}));
};
const handleSubmit:any=（e:Event）=>{
//暂停代码更改值，但控制台情况如下：
//{电子邮件：，密码：，页面语言：，记住检查：false}->第一次单击并打印
//{电子邮件：，密码：，页面语言：“eng”，记住检查：true}->再次单击并打印
setState（{…leftPartState，电子邮件：“”，密码：“”，rememberMeCheck:true，pageLanguage:localStorage.getItem（“userlanguage”）}）
e、 预防默认值（）；
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）
}
useffect（（）=>{
}，[leftPartState]）
const renderLoginPart=（）=>{
返回(
handleSubmit（事件）}>
handleClick（事件）}
/>
{
返回；
}}
className=“登录输入”
/>
{
返回；
}}
className=“登录输入mt-2”
/>
{/*不是：切丁·泽利奥伊·阿亚兰马尔*/}
{t（“忘记密码”）}
)
}
返回(
{renderLoginPart（）}
)
}
将默认连接（（存储：任意）=>（{oneframe:store}））（LoginPart）导出为任意；
useffectconst 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)
}
useEffect(() => {
console.log(leftPartState);
}, [leftParState]);
设置状态本质上是异步的。您不会在设置后立即获得更新的状态。您可以使用
useffectconst 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)
}
useEffect(() => {
console.log(leftPartState);
}, [leftParState]);