React点击按钮避免电量显示为-10的实现方案咨询

原代码的问题点 #

• 错误地将函数setMobileCharge与0做比较，函数本身不可能等于0，这个判断完全无效
• 点击按钮时未做边界校验，电量为0时继续点击会变成-10，不符合需求
• 电量为0时直接return 0会导致整个组件内容消失，而非仅隐藏电量文本

修正后的代码 #

import { useState } from 'react';

const Mobile = () => {
  const [charge, setCharge] = useState(20);

  const setMobileCharge = () => {
    // 仅当电量大于0时才减少10，避免出现负数
    if (charge > 0) {
      setCharge(charge - 10);
    }
  };

  return (
    <div>
      {/* 电量大于0时显示文本，等于0时自动隐藏该区域 */}
      {charge > 0 && <h3>Charge : {charge}</h3>}
      <button onClick={setMobileCharge}>Battery down</button>
    </div>
  );
};

export default Mobile;

关键修改说明 #

• 给点击事件添加判断逻辑：只有charge > 0时才执行减10操作，确保电量不会低于0
• 渲染电量文本时使用短路逻辑，电量为0时自动不显示对应的h3元素，满足“对应区域不显示文本”的需求
• 移除了原代码中完全无效的if (setMobileCharge === 0)判断

内容的提问来源于stack exchange，提问作者constobidullah