React中点击按钮如何同时调用两个函数？计数器颜色切换故障

核心问题分析 #

你的代码存在以下几个导致颜色切换失效的问题：

• Props名称不匹配：App组件传递给Buttons的是changeColor，但Buttons组件接收的是changeCounterColor，导致颜色切换函数无法被正确调用。
• OnClick事件写法错误：第一个按钮的onClick={(changeCounter, changeCounterColor)}是无效的逗号表达式，既没有正确触发两个函数，其他按钮也没有绑定颜色切换逻辑。
• 颜色切换逻辑固定：changeColor函数每次都固定设置为arr[1]（绿色），没有根据counter的变化动态切换颜色。
• 状态更新不同步：颜色切换和counter自增是两个独立的函数，容易出现不同步的情况。

修复后的完整代码 #

App.jsx

import { useState } from "react";
import "./App.css";
import Buttons from "./components/Buttons";
import Counter from "./components/Counter";

function App() {
  const [counter, setCounter] = useState(0);
  const [counterColor, setCounterColor] = useState("");
  
  const COLORS = ["red", "green", "blue", "yellow"];

  // 合并counter自增和颜色切换逻辑，确保同步更新
  const handleButtonClick = () => {
    const newCounter = counter + 1;
    setCounter(newCounter);
    // 根据counter的索引循环切换颜色（取模实现循环）
    setCounterColor(COLORS[newCounter % COLORS.length]);
  };

  return (
    <div className="App">
      <Counter
        counter={counter}
        clazz={counterColor}
      />
      <Buttons
        onClick={handleButtonClick}
      />
    </div>
  );
}

export default App;

Buttons.jsx

function Buttons({ onClick }) {
  return (
    <div>
      <button onClick={onClick}>Click</button>
      <button onClick={onClick}>Click</button>
      <button onClick={onClick}>Click</button>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default Buttons;

关键修改说明 #

1. 合并状态更新逻辑：将counter自增和颜色切换逻辑合并到handleButtonClick函数中，确保两个状态同步更新，避免异步更新导致的不同步问题。
2. 动态循环切换颜色：使用newCounter % COLORS.length实现颜色数组的循环遍历，每次counter增加时自动切换到下一个颜色，达到循环切换的效果。
3. 简化组件Props传递：给Buttons组件传递统一的onClick回调，所有按钮绑定同一个点击事件，简化组件逻辑的同时保证功能一致。
4. 修正Props与事件写法：解决了Props名称不匹配和onClick事件无效的问题，确保点击按钮时能同时触发counter自增和颜色切换。

额外优化建议 #

• 将颜色数组定义为组件外部的常量，避免组件每次渲染时重复创建数组，提升性能。
• 如果后续需要每个按钮对应不同颜色，可以给Buttons组件的按钮添加额外参数，在点击时传递给回调函数，但当前逻辑更符合你“counter变化时同步切换颜色”的需求。

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