Блог

просто глупый вопрос от меня, как ребята используют хук useState и предотвращают его уменьшение при отрицательном числе, например, я получил коды блоков, подобные этому:

 const [amount, setAmount] = useState(1);
    const handleSetAmount = () => {
            if (amount > 0) {
                return setAmount(amount   1)
            } else {
                return 0;
            }
    }

   return (
      <AmountContainer>
         <Remove onClick={() => setAmount(amount -1)}/>
         <Amount>{amount}</Amount>
         <Add onClick={handleSetAmount}/>
      </AmountContainer>
      <Button>ADD TO CART</Button>
)

 

Я хочу, чтобы состояние оставалось неизменным 0, если пользователи нажимают на кнопку удаления (не позволяя ей показывать отрицательное число), нажимают на кнопку добавления, это увеличит 1, но когда я так написал, это не сработало. Итак, кто-нибудь здесь знает, как это сделать, пожалуйста, помогите мне, спасибо! :3

Вот пример того, чего вы хотите достичь:

 import { useState } from "react";


export default function App() {
  const [state, setState] = useState(1);
  const decrease = () => {
    if (state == 0) return;
    setState(state - 1);
  };
  const increase = () => {
    setState(state   1);
  };
  return (
    <>
      <button onClick={increase}> </button>
      <button onClick={decrease}>-</button>
      {state}
    </>
  );
}
 

Другой вариант — отключить кнопку Удалить, когда сумма ===0

 const [amount, setAmount] = useState(1);

return (
  <AmountContainer>
    <Remove disabled={amount===0} onClick={() => setAmount(amount -1)}/>
    <Amount>{amount}</Amount>
    <Add onClick={() => setAmount(amount   1)}/>
  </AmountContainer>
  <Button>ADD TO CART</Button>
)