REACT Table select 行未正确创建复选框

Question

我是 REACT 新手，无法让 table 组件正常工作。我正在使用 react-tables 包和教程示例 here，但我在 table.js 组件文件中执行所有操作并将其添加到我的 App.js。基本上，我正在尝试创建一个带有分页、排序和选择 table 行的 table 复选框。我的问题是我只让复选框填充到 header 中（见下文）。

这是我的代码；我在这里做错了什么？注意 - 我的行是使用页面而不是行创建的，并且来自我的 API。关于如何解决这个问题有什么建议吗？

import React, { useMemo, useEffect, useState } from 'react'
import reactTable, {useTable, useRowSelect, usePagination, useSortBy} from 'react-table'
import axios from "axios";
import { COLUMNS } from './columns'
import './Table.css' 

export const Table = () => {
    const [loadingData, setLoadingData] = useState(true);
    const columns = useMemo(() => COLUMNS, []);
    const [data, setData] = useState([]);

    const IndeterminateCheckbox = React.forwardRef(
        //This is the function for the checkboxes in page select
        ({ indeterminate, ...rest }, ref) => {
          const defaultRef = React.useRef()
          const resolvedRef = ref || defaultRef
  
          React.useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate
          }, [resolvedRef, indeterminate])     
          return (
            <>
              <input type="checkbox" ref={resolvedRef} {...rest} />
            </>
          )
        }
    )

    useEffect(() => {
        async function getData() {
        await axios
          .get("http://localhost:5000/my/api")
          .then((response) => {
            // check if the data is populated
            console.log(response.data);
            setData(response.data);
            // you tell it that you had the result
            setLoadingData(false);
            });
        }
        if (loadingData) {
        // if the result is not ready so you make the axios call
            getData();
        }     
    }, []);

    const tableInstance = useTable({
        columns,
        data,
        initialState: { pageIndex: 2 }
    }, useSortBy,
       usePagination,
       useRowSelect,
       hooks => {
           hooks.visibleColumns.push(columns => [
               // Let's make a column for selection
               {
                   id: 'selection',
                   // The header can use the table's getToggleAllRowsSelectedProps method
                   // to render a checkbox
                   Header: ({ getToggleAllPageRowsSelectedProps }) => (
                       <div>
                           <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
                       </div>
                   ),
                   // The cell can use the individual row's getToggleRowSelectedProps method
                   // to the render a checkbox
                   Cell: ({ row }) => (
                       <div>
                           <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                       </div>
                   ),
               },
               ...columns,
            ])
        } 
    );
    const { getTableProps, 
        getTableBodyProps, 
        headerGroups, 
        prepareRow, 
        page, //Begins the pagination and select stuff
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        selectedFlatRows,
        state: { pageIndex, pageSize, selectedRowIds }} = tableInstance

    return (
    <div className="container">
        {loadingData ? (
            <p>Loading Please wait...</p>
        ) : (
            
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map((headerGroup) => (
                            <tr {...headerGroup.getHeaderGroupProps()}>
                                {
                                    headerGroup.headers.map((column) =>(
                                    <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                        {column.render('Header')}
                                        <span>
                                            {column.isSorted
                                            ? column.isSortedDesc
                                                ? ' '
                                                : ' '
                                            : ''}
                                        </span>
                                    </th>

                                ))}   
                            </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        page.map((row, i) => {
                            prepareRow(row);
                            
                            return(
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map(cell => {
                                            console.log(cell.render('Cell').props.value);
                                            //<td {...cell.getCellProps()}>{cell.render('Cell').props.value}</td>
                                            return <td>{cell.render('Cell').props.value}</td>
                                        })
                                    }
                                    
                                </tr>
                            )
                        })
                    }       
                </tbody>
            </table>
        )}

        <div className="pagination">
            <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
            {'<<'}
            </button>{' '}
            <button onClick={() => previousPage()} disabled={!canPreviousPage}>
            {'<'}
            </button>{' '}
            <button onClick={() => nextPage()} disabled={!canNextPage}>
            {'>'}
            </button>{' '}
            <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
            {'>>'}
            </button>{' '}
            <span>
            Page{' '}
            <strong>
                {pageIndex + 1} of {pageOptions.length}
            </strong>{' '}
            </span>
            <span>
            | Go to page:{' '}
            <input
                type="number"
                defaultValue={pageIndex + 1}
                onChange={e => {
                const page = e.target.value ? Number(e.target.value) - 1 : 0
                gotoPage(page)
                }}
                style={{ width: '100px' }}
            />
            </span>{' '}
        </div>
      </div>
   )
}

Answer 1

Return <td {...cell.getCellProps()}>{cell.render('Cell')}</td> 来自 tr.

这应该有效：

<tbody {...getTableBodyProps()}>
  {page.map((row, i) => {
    prepareRow(row);
    return (
      <tr {...row.getRowProps()}>
        {row.cells.map((cell) => {
          return (
            <td {...cell.getCellProps()}>{cell.render("Cell")}</td> // fix return statement
          );
        })}
      </tr>
    );
  })}
</tbody>

REACT Table select 行未正确创建复选框

REACT Table select rows not creating checkboxes correctly

select

pagination

reactjs

react-table