React双按钮状态控制异常求助：点击任意按钮仅触发接受状态

原代码的核心问题在于：

• 两个按钮共用同一个点击事件函数，且判断条件buttonText != declineText在初始状态下始终成立（'Accept'不等于'Decline'），导致无论点击哪个按钮都会触发接受分支的逻辑。
• 采用两个独立状态分别控制按钮文本，容易引发逻辑混乱。

方案一：给点击事件传递操作标识（快速修复） #

通过给handleClick传递参数，明确区分点击的是接受还是拒绝按钮，再执行对应逻辑：

import { useState } from 'react';

function FriendRequest() {
  const [buttonText, setButtonText] = useState('Accept');
  const [declineText, setDeclineText] = useState('Decline');

  // 接收操作类型参数
  function handleClick(action) {
    if (action === 'accept') {
      setButtonText('You accepted the friend request');
      setDeclineText('');
    } else if (action === 'decline') {
      setDeclineText('You declined the friend request');
      setButtonText('');
    }
  }

  return (
    <div>
      <button onClick={() => handleClick('accept')} className="btn btn-primary" id="accept">
        {buttonText}
      </button>
      <button onClick={() => handleClick('decline')} className="btn" id="decline">
        {declineText}
      </button>
    </div>
  );
}

方案二：优化状态管理（更简洁可维护） #

用单一状态记录好友请求的整体状态（待处理/已接受/已拒绝），避免维护多个独立状态：

import { useState } from 'react';

function FriendRequest() {
  // 状态可选值：pending（初始）、accepted（已接受）、declined（已拒绝）
  const [requestStatus, setRequestStatus] = useState('pending');

  function handleClick(action) {
    setRequestStatus(action === 'accept' ? 'accepted' : 'declined');
  }

  return (
    <div>
      <button onClick={() => handleClick('accept')} className="btn btn-primary" id="accept">
        {requestStatus === 'pending' ? 'Accept' : requestStatus === 'accepted' ? 'You accepted the friend request' : ''}
      </button>
      <button onClick={() => handleClick('decline')} className="btn" id="decline">
        {requestStatus === 'pending' ? 'Decline' : requestStatus === 'declined' ? 'You declined the friend request' : ''}
      </button>
    </div>
  );
}

两种方案对比：

• 方案一修改量小，适合快速修复现有代码；
• 方案二状态更集中，便于后续扩展（比如添加按钮禁用、状态重置等逻辑）。

内容的提问来源于stack exchange，提问作者Andrei-Cătălin Postolache