从React-Table中的一行中获取信息/数据/值

问题描述

我实际上整夜熬夜，试图弄清楚如何从我的行中获取价值。

const columns = useMemo(
    () => [
      {
        // first group - TV Show
        Header: "Shop Chop Chop List",// First group columns
        columns: [
          {
            Header: "User",accessor: "email",},{
            Header: "Store",accessor: "store",],{
        Header: "Details",columns: [
          {
            Header: "Item",accessor: "title",{
            Header: "Picture",accessor: "picture",Cell: ({ row }) => (
              <a
                target="_blank"
                rel="noopener noreferrer"
                href={row.original.picture}
              >
                {row.original.picture}
              </a>
            ),{
            Header: "Aisle",accessor: "aisleLocation",{
            Header: "Location",id: 'edit',accessor: 'id',Cell: ({value}) => (
              <div>
                <button
                  onClick={()=> {
                    console.log(value);
                  }}
                  className={styles.editBtn}
                >
                  Record Aisle
                </button>
              </div>
            ),{
              Header: "Remove",id: "delete",accessor: (str) => "delete",Cell: (row)=> (
                  <button
                  className={styles.deleteBtn}
                  onClick={()=> {
                      const datacopy = [...data];
                      datacopy.splice(row.index,1);
                      setData(datacopy);
                  }}>
                  Found
                </button>

              )
               
          }
        ],[data],);

这是我的最新尝试。我试图从这一行中获取一个值，以便可以在后端分配一个过道位置。我希望使用uniqueID，但也可以使其与title和store一起使用。很难从这一行中获取信息。

这是我的tableContainer

import React,{ Fragment } from 'react';
import {
  useTable,useSortBy,useFilters,useExpanded,usePagination,} from 'react-table';
import { Table,Row,Col,Button,Input} from 'reactstrap';
import { Filter,DefaultColumnFilter } from './Filters';

const TableContainer = ({ columns,data,renderRowSubComponent }) => {
  const {
    getTableProps,getTableBodyProps,headerGroups,page,prepareRow,visibleColumns,canPrevIoUsPage,canNextPage,pageOptions,pageCount,gotoPage,nextPage,prevIoUsPage,state: { pageIndex },} = useTable(
    {
      columns,defaultColumn: { Filter: DefaultColumnFilter },initialState: { pageIndex: 0,pageSize: 5 },usePagination
  );

  const generateSortingIndicator = (column) => {
    return column.isSorted ? (column.isSortedDesc ? ' ?' : ' ?') : '';
  };


  const onChangeInInput = (event) => {
    const page = event.target.value ? Number(event.target.value) - 1 : 0;
    gotoPage(page);
  };

  return (
    <Fragment>
      <Table bordered hover {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>
                  <div {...column.getSortByToggleProps()}>
                    {column.render('Header')}
                    {generateSortingIndicator(column)}
                  </div>
                  <Filter column={column} />
                </th>
              ))}
            </tr>
          ))}
        </thead>

        <tbody {...getTableBodyProps()}>
          {page.map((row) => {
            prepareRow(row);
            return (
              <Fragment key={row.getRowProps().key}>
                <tr onClick={()=> handleShow(row.original)}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    );
                  })}
                </tr>
                {row.isExpanded && (
                  <tr>
                    <td colSpan={visibleColumns.length}>
                      {renderRowSubComponent(row)}
                    </td>
                  </tr>
                )}
              </Fragment>
            );
          })}
        </tbody>
      </Table>

请，有人可以帮忙吗？我是新手，所以需要非常具体的说明

请，谢谢

解决方法

react-table用于显示数据，而不是JSX元素，但是您可以通过两种方式解决此问题，首先，您可以在行数据中传递唯一的id，就像上面在Cell中使用的那样或者您可以仅将JSX元素呈现为行数据并直接使用唯一的ID（例如，您要删除的某些模型ID），但是将JSX元素呈现为数据是一项繁重的任务，因为备注将失败，您将必须提供额外的逻辑以防止重新呈现。