React中onClick同时调用两个函数状态异常问题求助

核心问题分析 #

你遇到的问题确实和React状态更新的异步特性有关：当在同一个点击事件中同时调用子组件的setActiveButton和父组件的setActive时，React会对状态更新进行批量处理，导致子组件本地状态的更新可能被父组件状态变化触发的重渲染覆盖，首次点击时出现activeButton被重置为null的异常。

解决方案 #

方案1：使用单一数据源（推荐） #

直接去掉子组件本地的activeButton状态，完全依赖父组件传入的active值作为判断依据，从根源上消除状态同步冲突。

修正后的导航组件代码

import React from 'react';

const Nav = ({ active, setActive }) => {
  const handleCategoryClick = (category) => {
    setActive(category);
  };

  return (
    <div className="nav-container">
      {['美食', '旅行', '科技'].map((category) => (
        <button
          key={category}
          onClick={() => handleCategoryClick(category)}
          className={`nav-btn ${active === category ? 'active' : ''}`}
        >
          {/* 仅当父组件active匹配时显示SVG */}
          {active === category && <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></svg>}
          {category}
        </button>
      ))}
    </div>
  );
};

export default Nav;

父组件代码（无需修改）

import React, { useState } from 'react';
import Nav from './Nav';
import FoodCategory from './FoodCategory';
import TravelCategory from './TravelCategory';
import TechCategory from './TechCategory';

const ParentComponent = () => {
  const [activeCategory, setActiveCategory] = useState(null);

  const renderActiveContent = () => {
    switch (activeCategory) {
      case '美食':
        return <FoodCategory />;
      case '旅行':
        return <TravelCategory />;
      case '科技':
        return <TechCategory />;
      default:
        return <div>请选择分类</div>;
    }
  };

  return (
    <div className="app-container">
      <Nav active={activeCategory} setActive={setActiveCategory} />
      <div className="content-area">{renderActiveContent()}</div>
    </div>
  );
};

export default ParentComponent;

方案2：保留本地状态并正确同步 #

如果确实需要在子组件中维护activeButton本地状态（比如有独立于父组件的交互逻辑），需要通过函数式更新确保状态基于最新值，并通过useEffect同步父组件状态变化。

修正后的导航组件代码

import React, { useState, useEffect } from 'react';

const Nav = ({ active, setActive }) => {
  const [activeButton, setActiveButton] = useState(null);

  // 同步父组件active到本地状态
  useEffect(() => {
    setActiveButton(active);
  }, [active]);

  const handleCategoryClick = (category) => {
    // 使用函数式更新，确保基于最新的prev状态
    setActiveButton(prev => category);
    setActive(category);
  };

  return (
    <div className="nav-container">
      {['美食', '旅行', '科技'].map((category) => (
        <button
          key={category}
          onClick={() => handleCategoryClick(category)}
          className={`nav-btn ${activeButton === category ? 'active' : ''}`}
        >
          {activeButton === category && <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></svg>}
          {category}
        </button>
      ))}
    </div>
  );
};

export default Nav;

关键原理说明 #

1. 单一数据源：React推荐将共享状态提升到最近的公共父组件，避免多个组件维护相同状态导致的同步问题，这是最简洁可靠的解决方案。
2. 函数式更新：当状态更新依赖于前一次状态值时，必须使用setState(prev => newValue)的形式，确保获取到最新的状态值，避免异步批量更新导致的状态覆盖。
3. useEffect同步：当子组件本地状态需要和父组件状态保持一致时，用useEffect监听父组件状态变化，实时同步本地状态。

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