react-table中基于用户输入的单元格条件样式不生效问题求助

你定义的isVerified是普通JavaScript变量，不是React状态变量。React仅会在状态或props变化时触发组件重渲染，修改普通变量不会通知React更新DOM，所以样式无法同步变化。另外，每次组件重新渲染时，tableHooks函数会重新执行，isVerified会被重置为false，进一步导致状态追踪失效。

在Cell组件内部使用useState钩子管理每一行的验证状态，让每一行的输入框拥有独立状态，状态变化会触发React重渲染，从而更新样式。

修改后的完整代码 #

function DataTable() {
  const { data } = useContext(CsvContext);

  const _data = useMemo(() => [...data], [data]);

  const dataColumns = useMemo(() => 
    _data[0] ? Object.keys(_data[0]).map((key) => ({
      Header: key,
      accessor: key
    })) : [], 
  [_data]);

  const tableHooks = (hooks) => {
    hooks.visibleColumns.push((columns) => [
      ...columns,
      {
        id: 'Verify',
        Header: 'Verify',
        Cell: ({ row }) => {
          // 为每一行单独维护验证状态
          const [isVerified, setIsVerified] = useState(false);

          return (
            <input
              onChange={(e) => {
                const inputValue = e.target.value;
                // 对比输入值和当前行的ID值
                setIsVerified(inputValue === row.values['ID']);
              }}
              style={{ backgroundColor: isVerified ? 'green' : 'white' }}
              type="text"
            />
          );
        }
      }
    ]);
  };

  const tableInstance = useTable({ columns: dataColumns, data: _data }, tableHooks, useSortBy);
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;

  // 补充表格渲染结构，确保组件完整运行
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render('Header')}
                {column.isSorted ? (column.isSortedDesc ? ' ↓' : ' ↑') : ''}
              </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>
  );
}

关键改动说明 #

• 将isVerified从tableHooks中的普通变量，改为Cell组件内部的useState状态，让每一行输入框独立维护自身验证状态。
• 使用setIsVerified更新状态，触发React重渲染，同步更新输入框背景样式。
• 补充了完整的表格渲染JSX结构，确保组件能正常渲染运行。

内容的提问来源于stack exchange，提问作者marmot-shoes