React中onClick绑定两个箭头函数的问题及优化建议

你的代码现在有个核心问题——点击按钮后状态不会更新。因为你在onClick里只是返回了两个未执行的箭头函数数组，压根没调用这两个set函数，等于白写了。下面是具体的优化修改建议：

• 先修复核心执行问题：直接在onClick的箭头函数里调用两个状态更新函数，不需要嵌套箭头函数。比如：

  onClick={() => {
    setvalue(value - 1);
    setvalue1(value1 - 1);
  }}
  

• 提取复用函数，减少重复代码：把加减逻辑抽成组件内的独立函数，既避免重复代码，也让代码更易维护。比如：

  const handleDecrement = () => {
    setvalue(prev => prev - 1);
    setvalue1(prev => prev - 1);
  };
  
  const handleIncrement = () => {
    setvalue(prev => prev + 1);
    setvalue1(prev => prev + 1);
  };
  

  之后按钮直接用onClick={handleDecrement}这类写法即可。

• 使用函数式状态更新：当新状态依赖旧状态时，用setState(prev => prev + 1)的形式，能避免闭包导致的状态更新不准确问题（比如快速连续点击时的状态偏差）。

• 语义化与语法优化：

  • 组件名Navbar和实际功能（双计数器）不符，建议改成DualCounter或CounterApp；
  • 状态变量value1改成更有意义的名字，比如secondCounter；
  • 修复JSX语法小问题：原代码中</div >的多余空格去掉，改成</div>。

修改后的完整代码 #

import React, { useState } from 'react';
import './Body.css';

export default function DualCounter() {
  const [firstCounter, setFirstCounter] = useState(0);
  const [secondCounter, setSecondCounter] = useState(0);

  const handleDecrement = () => {
    setFirstCounter(prev => prev - 1);
    setSecondCounter(prev => prev - 1);
  };

  const handleIncrement = () => {
    setFirstCounter(prev => prev + 1);
    setSecondCounter(prev => prev + 1);
  };

  return (
    <>
      <div>
        <h1>Our App</h1>
        <div className="back">
          <h3>Counter</h3>
          <button onClick={handleDecrement}> - </button>
          <button>{firstCounter}</button>
          <button>{secondCounter}</button>
          <button onClick={handleIncrement}> + </button>
        </div>
      </div>
    </>
  );
}

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