反应:useState 向我显示以前的状态值，而当我查看 DevTools 时它会发生变化

Question

必要的导入，例如useState，useDispatch

function ItemCard(props) {
const [count, setCount] = useState(0);
const dispatch = useDispatch();

在这里，我尝试使用一个按钮来触发此功能并增加计数，但是当我console.log它时，它会打印较旧的值。当我将计数发送到调度时，旧值也会传入。

const addCount = () => {
setCount((prevCount) => prevCount + 1);
console.log(count);
dispatch(
updateCart(
"ADD_TO_CART",
{ id: props.id, name: props.name, price: props.price },
count
)
);
};
const decreaseCount = () => {
if (count > 0) {
setCount((prevCount) => prevCount - 1);
dispatch(
updateCart(
"REMOVE_FROM_CART",
{ id: props.id, name: props.name, price: props.price },
count
)
);
}
};
return (
<div className="card">
<div className="image">
<img src={props.img} alt="cookie" />
</div>
<div className="title">
<h2>{props.name}</h2>
<h2>Rs.{props.price}</h2>
</div>
<p className="detail">{props.detail}</p>
<div className="buttons">
<button onClick={addCount} id="add-to-cart">
+
</button>
<span>{count}</span>
<button onClick={decreaseCount} id="add-to-cart">
-
</button>
</div>
</div>
);
}
export default ItemCard;

Answer 1

setState是异步的，因此您必须使用局部变量或使用useEffect来监视状态何时已经更新

const decreaseCount = () => {
if (count > 0) {
setCount((prevCount) => prevCount - 1);
}
};
useEffect(() => {
dispatch(
updateCart(
"REMOVE_FROM_CART",
{ id: props.id, name: props.name, price: props.price },
count
)
);
}, [count])

或

const decreaseCount = () => {
if (count > 0) {
const localCount = count - 1;
dispatch(
updateCart(
"REMOVE_FROM_CART",
{ id: props.id, name: props.name, price: props.price },
localCount
)
);
setCount((prevCount) => prevCount - 1);
}
};

Answer 2

你应该以这种方式更新你的状态：

SetCount (count + 1)

请注意，您的状态在 addCount 函数运行后会更新