React代码中如何通过按钮调用setCount实现数值递减

原代码存在两个核心问题：

• useState的初始化逻辑错误：初始化回调函数应该返回初始数值，而非直接调用setCount，这会引发异常
• 按钮点击事件绑定错误：直接传入setCount会导致把事件对象作为参数传递，无法实现预期的递减逻辑

以下是修正后的代码：

import { useState } from 'react';

export default function App() {
  const [state, setState] = useState('mariam');
  // 初始化count为你需要的初始数值，比如这里设为5
  const [count, setCount] = useState(5);

  // 定义递减处理函数
  const handleDecrement = () => {
    // 当count大于0时递减，否则保持0
    setCount(prevCount => prevCount > 0 ? prevCount - 1 : 0);
  };

  return (
    <div>
      <p>{state}</p>
      <input onChange={(e) => setState(e.target.value)} />

      <p>{count}</p>
      {/* 绑定处理函数到按钮点击事件 */}
      <button onClick={handleDecrement}>click</button>
    </div>
  );
}

关键修改说明：

• 把count的初始化改为直接传入初始数值（比如5），如果需要动态计算初始值，初始化回调也应该返回数值，而非调用setCount
• 使用函数式更新setCount(prevCount => ...)，确保获取到最新的count值，避免闭包问题
• 单独定义handleDecrement函数封装递减逻辑，按钮点击时调用这个函数

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