反应状态未正确更新。增加和减少功能在第一次点击时不起作用，但在后续点击后起作用

Question

React 状态未正确更新。增加和减少功能在第一次点击时不起作用，但在后续点击后起作用。小计值总是错误的。如果数量为 10，则小计应为 105。但小计显示为 94.50

import React from "react";
import { Card, Button, CardDeck } from 'react-bootstrap';
import { useState } from "react";

import image from "../images/image.PNG";
import "./productcard.css";

function ProductCard() {
    const price = Number(10.50);
    const [quantity, setQuantity] = useState(0);
    const [subtotal, setSubtotal] = useState(0);
    function calculatesubtotal() {
        const sub = quantity * price;
        setSubtotal(sub);
    }
    function increase() {
        setQuantity(quantity+ 1 );     
        calculatesubtotal();   
    }
    function decrease(e) {
        setQuantity(quantity- 1);
        calculatesubtotal();
        e.stopPropagation();
    }

    return (
        <Card className="card" onClick={increase}>
  <Card.Img className="image" variant="top" src={image} />
  <Card.Body className="body">
    <Card.Title className="title">White Bread 700g</Card.Title>
  </Card.Body>
  <label className="quantity-label">QTY</label>
  <div className="quantity-area">
  <Button className="increase-button" variant="primary" onClick={increase}>+</Button>
  <input className="quantity" type="number" value={quantity}/>
  <Button className="decrease-button" variant="primary" onClick={decrease}>-</Button>
  </div>
  <label className="price-label" >Price</label>
  <input className="price" type="number" value={price} />  
  <label className="subtotal-label" >Subtotal</label>
  <input className="subtotal" type="number" value={subtotal}/>
    
    
</Card>
    );
}

export default ProductCard;

Answer 1

 function increase() {
        setQuantity(quantity+ 1 );     
        calculatesubtotal();   
    }

因为这里当你更新quantity时，calculatesubtotal里面的quantity read仍然指的是价值。您可以将新值传递给 calculatesubtotal 并在内部使用它。

function increase() {
        let newQt = quantity+ 1 ;
        setQuantity(newQt);     
        calculatesubtotal(newQt); // Modify calculatesubtotal accordingly
    }

Answer 2

当您有一个值直接依赖于另一个状态值时，最好不要在状态中复制它，而是在每次状态值更改时执行计算：

    const price = Number(10.50);
    const [quantity, setQuantity] = useState(0);

    function increase() {
        setQuantity(quantity+ 1 );     
    }
    function decrease(e) {
        setQuantity(quantity- 1);
        e.stopPropagation();
    }

    const subtotal = useMemo(() => quantity * price,[quantity])

更少的代码和声明式方法。

Answer 3

使用 useEffect 钩子代替下面的 calculatesubtotal 函数

import React,{useEffect} from "react";

...

uesEffect(()=>{
setSubtotal(quantity * price);
},[quantity]]

import React,{useEffect} from "react";
import { Card, Button, CardDeck } from 'react-bootstrap';
import { useState } from "react";

import image from "../images/image.PNG";
import "./productcard.css";

function ProductCard() {
    const price = Number(10.50);
    const [quantity, setQuantity] = useState(0);
    const [subtotal, setSubtotal] = useState(0);

    uesEffect(()=>{
        setSubtotal(quantity * price);
    },[quantity]]

    function increase() {
        setQuantity(quantity+ 1 );     
    }
    function decrease(e) {
        setQuantity(quantity- 1);
        e.stopPropagation();
    }

    return (
        <Card className="card" onClick={increase}>
  <Card.Img className="image" variant="top" src={image} />
  <Card.Body className="body">
    <Card.Title className="title">White Bread 700g</Card.Title>
  </Card.Body>
  <label className="quantity-label">QTY</label>
  <div className="quantity-area">
  <Button className="increase-button" variant="primary" onClick={increase}>+</Button>
  <input className="quantity" type="number" value={quantity}/>
  <Button className="decrease-button" variant="primary" onClick={decrease}>-</Button>
  </div>
  <label className="price-label" >Price</label>
  <input className="price" type="number" value={price} />  
  <label className="subtotal-label" >Subtotal</label>
  <input className="subtotal" type="number" value={subtotal}/>
    
    
</Card>
    );
}

export default ProductCard;

解释

只要数量发生变化，就会调用此 useEffect 并根据最新数量更新小计

反应状态未正确更新。增加和减少功能在第一次点击时不起作用，但在后续点击后起作用

React state not updating correctly. Increase and decrease function does not work on first click, but works after subsequent clicks

javascript

reactjs

react-hooks