我有一個功能組件，我通過反應控制用戶登錄。根據input中輸入的用戶名和密碼，如果API回傳的值為true，則重定向到另一個頁面，如果為false，則停留在同一頁面上。當我在用戶名和密碼正確的情況下按下按鈕時，第一個值是它回傳 undifined ，但是當我第二次按下按鈕時，它回傳 true 并重定向到另一個頁面。
控制臺日志（isUser）；//當我檢查時，即使名字和密碼的值已滿，它也顯示未定義，但是當我再次按下按鈕時，如果用戶名和密碼正確則回傳true。
這是什么原因？
export default function Login() {
const [isUser, setUser] = useState();
const [name, setName] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const history = useHistory();
let control;
function userControl() {
debugger;
let userService = new UserService();
userService.getUserControl(name, password).then((result) => setUser(result.data.data));
console.log(isUser);
if (isUser == true) {
history.push('/oee');
} else {
setUser(false);
setError('Kullan?c? Ad?n?z veya ?ifreniz Hatal?');
control = errorMessage();
}
}
function errorMessage() {
return (
<div>
<Message negative>
<Message.Header>{error}</Message.Header>
</Message>
</div>
);
}
return (
<div>
{control}
<Grid textAlign="center" style={{ height: '70vh' }} verticalAlign="middle">
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="teal" textAlign="center">
<Image style={{ height: 100, width: 200 }} src={ydclogo} />
</Header>
<Form size="large">
<Segment stacked>
<Form.Input
fluid
icon="user"
iconPosition="left"
placeholder="User Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Form.Input
fluid
icon="lock"
iconPosition="left"
placeholder="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button color="teal" fluid size="large" onClick={userControl}>
Login
</Button>
</Segment>
</Form>
<Message>L3 RAPORLAMA S?STEM?</Message>
</Grid.Column>
</Grid>
</div>
);
}
uj5u.com熱心網友回復：
userService.getUserControl是異步操作。為了能夠使用此回應，您應該將代碼包裝在then()回呼中。但是設定狀態值 usinguseState也是異步操作，不能保證您在呼叫setUser. 你可以這樣做：
userService.getUserControl(name, password).then((result) => {
const user = result.data.data
setUser(user)
if (user == true) {
history.push('/oee');
} else {
setUser(false);
setError('Kullan?c? Ad?n?z veya ?ifreniz Hatal?');
control = errorMessage();
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/394597.html
標籤：javascript 反应