React Table工具提示-在工具提示中使用另一个行值

import React, { useState, useEffect, useCallback } from 'react';
import { useTable } from 'react-table';

const Table = ({ data }) => {
  const columns = [
    // 其它列定义...
    {
      Header: '操作',
      accessor: 'id',
      Cell: ({ value, row }) => {
        const [tooltipVisible, setTooltipVisible] = useState(false);
        const [tooltipContent, setTooltipContent] = useState('');

        useEffect(() => {
          // 监听行值的变化，并更新工具提示的内容
          setTooltipContent(row.original.anotherValue);
        }, [row.original.anotherValue]);

        const handleMouseEnter = useCallback(() => {
          // 鼠标悬停事件处理函数
          setTooltipVisible(true);
        }, []);

        const handleMouseLeave = useCallback(() => {
          // 鼠标离开事件处理函数
          setTooltipVisible(false);
        }, []);

        return (
          <div>
            <button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
              操作按钮
            </button>
            {tooltipVisible && <div className="tooltip">{tooltipContent}</div>}
          </div>
        );
      },
    },
  ];

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default Table;