如何将react-bootstrap表格formatter的当前行数据传递给子组件

解决方案 #

你完全不需要绕rowEvents、全局状态/Redux这些弯路，react-bootstrap-table的formatter回调本身就会传入当前行的row对象，直接在事件绑定的时候把当前行传递给处理函数即可。

1. 改造行选择处理函数，支持直接接收行参数 #

删掉原来依赖selectedRow、selectedRowIsReady的逻辑，直接接收行数据传递给父组件：

const setSelectRow = useCallback((row) => {
  props.onSelectSetting(row);
}, [props]);

2. 改造formatter，直接使用当前行参数 #

formatter的入参row就是当前渲染行的实时数据，直接绑定到点击事件、传给子组件即可，不需要等待全局状态更新：

const actionFormatter = (cell, row) => {
  return (
    <div className="action-cell text-center">
      <Tooltip title="View file">
        <span className="svg-icon svg-icon-xl" onClick={() => setSelectRow(row)}>
          <SVG
            src={toAbsoluteUrl("/media/svg/icons/General/Binocular.svg")}
          />
        </span>
      </Tooltip>
      {/* 直接把当前行传入下载组件 */}
      <SystemFileDownload row={row} />
    </div>
  );
};

冗余逻辑清理 #

原来的rowEvents配置、selectedRow/selectedRowIsReady状态、对应的useEffect监听逻辑全部可以删除，不会影响功能，代码会简洁很多。

你之前遇到的状态滞后、多组件同时触发useEffect的问题，本质是因为你用了全局共享的状态来存储选中行，所有行的操作列组件都依赖同一个全局状态，自然会出现联动更新、数据滞后的问题。每一行的formatter都是独立对应一行数据渲染的，直接用入参的row就不会出现数据串用、更新冲突的问题。

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