为什么我必须在表单中的“提交”按钮上按两次才能看到反应中的日志？

Question

我想在单击提交按钮后立即将“ans”登录到控制台。 但问题是我必须按两次提交按钮才能查看日志。 iValue、pValue、nValue 等状态在第一次单击按钮时更新。我开始知道我不应该在 onChange 事件处理程序中编写 parseFloat(e.target.value)。 但是，问题仍然存在。 这是代码片段。 作为记录，我试图实现的公式是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>
    );
}

Answer 1

状态更新可能是异步的。 React 文档中清楚地提到了这一点： https : //reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous这就是为什么当您尝试记录正确时 ans 仍然是旧值在调用 setAns() 之后。 如果你想在 ans 更新时记录，可以使用效果

const logChange = useEffect(() => {
    console.log('new value of ans ', ans);
  }, [ans]);

Answer 2

设置状态是异步的，这意味着您将无法在更改后立即记录它。 你应该使用 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()
    }

Answer 3

尝试使用 react hook useEffect 来记录“ans”的更新状态

useEffect(() => {
    console.log(ans);
});

看看文档： https : //reactjs.org/docs/hooks-effect.html