[英]Why do i have to press twice on “Submit” button in form to see the logs in react?
I want to have "ans" logged in console as soon as I click on the submit button.我想在单击提交按钮后立即将“ans”登录到控制台。 But the problem is I have to press the submit button twice to see the log.
但问题是我必须按两次提交按钮才能查看日志。 The states like iValue, pValue, nValue, etc. are updated the first time button is clicked though.I came to know that I shouldn't write parseFloat(e.target.value) in onChange event handler.
iValue、pValue、nValue 等状态在第一次单击按钮时更新。我开始知道我不应该在 onChange 事件处理程序中编写 parseFloat(e.target.value)。 However, the problem still persists.
但是,问题仍然存在。 Here is the code snippet.
这是代码片段。 For the record, the formula I am trying to implement is ans = pValue * (iValue + 1)^nValue
作为记录,我试图实现的公式是ans = pValue * (iValue + 1)^nValue
import React, {useState} from 'react';
import {Link} from 'react-router-dom';
import { Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
export default function FirstComponent() {
const [pvalue, setPvalue] = useState(0);
const [ivalue, setIvalue] = useState(0);
const [nvalue, setNvalue] = useState(0);
const [ans, setAns] = useState(null);
const submitHandler = (e) => {
e.preventDefault();
let temp = ivalue + 1;
temp = ((temp ** nvalue)*pvalue).toFixed(2)
setAns(temp)
console.log(ans)
}
return (
<Form className="container" onSubmit={submitHandler}>
<FormGroup row>
<Label for="form1" sm={2}>
P value
</Label>
<Col sm={10}>
<Input
type="text"
name="pvalue"
id="form1"
placeholder="Enter the value of P"
onChange={(e) => setPvalue(parseFloat(e.target.value))}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="form2" sm={2}>
I value
</Label>
<Col sm={10}>
<Input
type="text"
name="ivalue"
id="form2"
placeholder="Enter the value of I"
onChange={(e) => setIvalue(parseFloat(e.target.value))}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="form3" sm={2}>
N value
</Label>
<Col sm={10}>
<Input
type="text"
name="nvalue"
id="form3"
placeholder="Enter the value of N"
onChange={(e) => setNvalue(parseFloat(e.target.value))}
/>
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button>Submit</Button>
</Col>
</FormGroup>
<p style={{ alignItems: "center" }}>
<Link to="/">Go back</Link>
</p>
</Form>
);
}
State Updates May Be Asynchronous.状态更新可能是异步的。 It is mentioned clearly in the React docs: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous That's why ans is still old value when you tried to log if right after calling setAns().
React 文档中清楚地提到了这一点: https : //reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous这就是为什么当您尝试记录正确时 ans 仍然是旧值在调用 setAns() 之后。 If you want to log whenever ans is updated, can useEffect
如果你想在 ans 更新时记录,可以使用效果
const logChange = useEffect(() => {
console.log('new value of ans ', ans);
}, [ans]);
Setting state is async which means you will not be able to log it right after you change it.设置状态是异步的,这意味着您将无法在更改后立即记录它。 You should use useCallback
你应该使用 useCallback
const logChange = useCallback(item => {
console.log('new value of ans ', ans);
}, [ans]);
const submitHandler = (e) => {
e.preventDefault();
let temp = ivalue + 1;
temp = ((temp ** nvalue)*pvalue).toFixed(2)
setAns(temp)
logChange()
}
Try to use react hook useEffect to log updated state of 'ans'尝试使用 react hook useEffect 来记录“ans”的更新状态
useEffect(() => {
console.log(ans);
});
Have a look at the docs: https://reactjs.org/docs/hooks-effect.html看看文档: https : //reactjs.org/docs/hooks-effect.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.