React跨组件实现表格无选中项时禁用继续按钮问题排查

现有代码存在4个核心问题，直接导致交互失效：

• 状态更新方法调用错误：setEnabledButton是React useState 返回的状态更新函数，必须以函数调用形式setEnabledButton(目标值)触发更新，直接给变量重新赋值会覆盖函数引用，既不会触发组件重渲染，也正是IDE抛出「赋值后未使用」警告的原因。
• 存在冗余状态：按钮是否可用完全由选中发票的数量推导得出，不需要单独定义enabledButton状态存储，多维护一份状态反而容易出现数据不一致问题。
• 跨组件状态未打通：发票表格和继续按钮分属两个独立组件，作用域完全隔离，表格内的选中状态默认不会传递到按钮组件中。
• 按钮属性传值错误：JSX中写裸属性enabledButton等价于enabledButton={true}，等于把按钮永久设为激活状态，根本没有绑定动态判断逻辑；另外多数组件库控制按钮禁用的属性为disabled，需要对应组件API做适配。

正确实现方案 #

1. 做状态提升（核心步骤） #

兄弟组件的共享状态需要提升到二者的最近公共父组件维护，由父组件作为单一数据源统一管理状态，再通过props分发给两个子组件。
父组件示例代码：

// 公共父组件，例如 payment-page.js
import { useState } from 'react';
import PaymentTable from './payment-table';
import PolicyPaymentInfo from './policy-payment-info';

export default function PaymentPage() {
  // 选中的发票列表统一在父组件维护
  const [selectedItems, setSelectedItems] = useState([]);
  // 直接根据选中项长度计算按钮状态，不需要额外定义状态
  const isContinueEnabled = selectedItems.length > 0;

  const handlePayment = () => {
    // 支付提交逻辑，可直接获取选中的发票数据
    console.log('提交的发票列表：', selectedItems);
  }

  return (
    <div>
      {/* 给表格传选中值、状态更新方法 */}
      <PaymentTable 
        selectedItems={selectedItems} 
        onSelectionChange={setSelectedItems} 
      />
      {/* 给按钮区域传按钮状态、点击回调 */}
      <PolicyPaymentInfo 
        isContinueEnabled={isContinueEnabled}
        onPayment={handlePayment}
      />
    </div>
  )
}

2. 修改表格组件 payment-table.js #

删除本地冗余的按钮状态逻辑，仅通过props接收父组件传值，选中项变化时调用父组件传入的更新方法即可：

// payment-table.js
export default function PaymentTable({ selectedItems, onSelectionChange }) {
  // 表格行勾选回调
  const handleRowSelect = (newSelectedRows) => {
    // 直接调用父组件方法更新全局选中状态，不需要本地再存副本
    onSelectionChange(newSelectedRows);
  }

  return (
    // 表格渲染逻辑，把选中值、勾选回调绑定到表格组件对应属性
    <Table selectedRows={selectedItems} onRowSelect={handleRowSelect} />
  )
}

这里不需要再写useEffect同步按钮状态，所有状态由父组件统一管理，从根源避免多份状态不同步的问题。

3. 修改按钮所在组件 policy-payment-info.js #

接收父组件传入的按钮状态，动态绑定到按钮属性上（如果所用组件库是用disabled属性控制禁用，对应做逻辑取反即可）：

// policy-payment-info.js
export default function PolicyPaymentInfo({ isContinueEnabled, onPayment }) {
  return (
    <div className={hiddenControlButtonClass}>
      <AS.Button 
        variant="outlined" 
        onClick={onPayment} 
        enabledButton={isContinueEnabled}
        // 若组件用disabled属性控制状态，替换为下面这行
        // disabled={!isContinueEnabled}
      >
        {t('policy-payment-info.continue')}
      </AS.Button>
    </div>
  )
}

可选优化 #

如果两个组件嵌套层级很深，逐层传props过于繁琐，可以用Context、Zustand等全局状态方案存储selectedItems，核心逻辑不变：始终保持选中状态为单一数据源，按钮激活状态直接由选中项长度动态计算，不维护冗余派生状态。

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