React Table表头switch开关状态变更但UI不切换问题排查

问题根因 #

你定义columns的React.useMemo依赖数组为空，仅会在组件首次渲染时生成一次列配置。后续content属性更新时，useMemo不会重新计算列配置，导致Cell组件内部绑定的checked永远是首次渲染拿到的初始content值，UI自然不会同步更新。

修复方案 #

1. 将content添加到React.useMemo的依赖数组中，保证content变化时会重新生成最新的列配置，Cell组件能拿到最新的状态值：

function DefaultParametersRowContent({ data, impactFields, onClickHandler, content }: any) {
  console.log(content);
  const columns = React.useMemo(
    () => [
      {
        Header: "",
        accessor: "name",
      },
      {
        Header: "",
        accessor: 'action2',
        type: "switch",
        Cell: (row: { row: { original: any; }; }) => (
          <span >
            <div className='menupolicy__form--switch'>
              <label className='switch'>
                <input
                  type='checkbox'
                  checked={content}
                  onChange={() => onClickHandler()} />
                <span className='switch__slider round'></span>
              </label>
            </div>
          </span>
        ),
      },
      {
        Header: () => null,
        id: 'expander',
        Cell: ({ row }: any) => (
          <span {...row.getToggleRowExpandedProps()}>
            {row.isExpanded ? <FaChevronUp /> : <FaChevronDown />}
          </span>
        ),
      }
    ],
    [content] // 此处添加content作为依赖
  );
  // 其余原有代码保持不变
}

2. 校验父组件中content对应的状态更新逻辑：保证更新状态时是返回新的状态值/对象，而不是直接修改原状态的可变更新，避免React无法检测到状态变更触发重渲染。
3. 如果当前开关是每行独立控制的，请勿绑定全局传入的content属性，改为绑定行自身数据中的状态字段，示例：

checked={row.row.original.isOpen} // 替换isOpen为你行数据中对应的开关字段

更新状态时需修改对应行的数据源，且保证传入React Table的data属性是更新后的全新数组，触发表格重渲染。

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