单击复选框后如何验证？

Question

我分解了我的代码以使其看起来简单

  const [factor, setfactor] = useState(1);
  const [nullify, setNullify] = useState(1);

  const Price = 10;
  const Bonus = 15;
  const finalPrice = (Price * factor - Bonus) * nullify;
// start         5 = (10 * 2 -15)* 1
// after Click  -5 = (10 * 1 -15)* 1
//what i want    0 = (10 * 1 -15)* 0

   const handleFactor = () => {
    setfactor(1)
    validate()
  };

  const validate = () => {
    if (finalPrice <= 0) {
      setNullify(0);
    }
  };

  useEffect(() => {
    handleFactor();
  }, [factor]);
  //HTML Stuff
  return (
    <>
      <input type="checkbox" onClick={handleFactor} />
      <input type="checkbox" onClick="activate bonus" />


      {finalPrice}
    </>
  );

我想，如果奖金低于 0，最终价格不应该是负数，而是它本身应该变成零 - 但它不起作用。

我知道，当验证完成时，最终价格将为 5。 但是我如何获得新的价格？

Answer 1

State 更新是异步的，因此您可以在下一次渲染时获得更新的 state。 当你这样做时

const handleFactor = () => {
  setfactor(1)
  validate()
};

state 尚未更新，验证将使用以前的（有效）值。 您需要将验证移至下一个渲染才能正常工作。

但是，您不需要另一个 state 来确保finalPrice高于0 。 使用 Math.max(price * factor - bonus, 0) to get the max between the final price and ：

 const { useState, Fragment } = React; const Demo = ({ price, bonus }) => { const [factor, setfactor] = useState(2); const finalPrice = Math.max(price * factor - bonus, 0); const handleFactor = () => { setfactor(1) }; return ( <Fragment> <input type="checkbox" onClick={handleFactor} /> {finalPrice} </Fragment> ); }; ReactDOM.createRoot(root).render(<Demo price={10} bonus={15} />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>