在表React中添加更多视图

Question

我有一种情况，我在frontend上有像50 records一样的complete data。

我必须在Table中显示记录。

有一次我只能show 10记录。然后我有了view more按钮。click查看更多. It will load the next 10记录等等...

我能得到一些帮助来解决这个问题吗？

表代码：-4\f25 components TableWrapper TableBody TableHead TableRow -4\f6(-4\f25 components-4\f6组件-4\f25 Code-4\f6组件

TableWrapper.js

const TableWrapper = ({...props}) => {
  const { tableData, columns } = props;
  const addNewRows = () => {
   console.log("Code for adding extra rows");
  }
  return (
    <table>
      <TableHead headers={columns} />
      <TableBody rows={tableData} tableData={tableData} headers={columns} />
    </table>
    <fragment onClick=addNewRows>View more</fragment>
  );
};

export default TableWrapper;

TableBody.js

const TableBody = ({...props}) => {
  const { rows, tableData, headers } = props;

  const [columnHeaderKeys, setColumnHeaderKeys] = useState([]);

  useEffect(()=>{
    let keysArray = [];
    headers.map((headKeys) =>{
      keysArray.push(headKeys.field)
    })
    {keysArray.length !== 0 ? setColumnHeaderKeys(keysArray) : setColumnHeaderKeys([])}
  },[])

  return (
    <>
    {tableData.length !== 0 ?
      tableData.data.firstResponse.map((row, index)=>{
        return (<tr key={index}><TableRow key={index} data={row} keys={columnHeaderKeys}/></tr>)
      }) : <div>{"No Data is there"}</div>
    }
    </>
  );
};

export default TableBody;

TableHead.js

const TableHead = ({...props}) => {
  const { headers } = props;
  return (
    <>
        {headers.map(header => (
          <th
            key={`table-header-${header.key}`}
            style={header.style}>
            {header.header}
          </th>
        ))}
    </>
  );
};

export default TableHead;

TableRow.js

const TableRow = ({...props}) => {
  const { keys, data } = props;

  return (
    <>
    {keys.map((key)=>{
        return <td key={props.data[key]}>{props.data[key]}</td>
    })}
    </>
  );
};

export default TableRow;

提前感谢

Answer 1

假设tableData包含所有行(50条记录)，您可以跟踪使用useState钩子应该显示多少条记录。然后，只需根据该值提取所需的行，并将其传递到表中。

如下所示：

const PAGE_SIZE = 10;

const TableWrapper = ({...props}) => {
  const { tableData, columns } = props;

  const [ numToDisplay, setNumToDisplay ] = useState(PAGE_SIZE);
  
  const addNewRows = () => {
    console.log("Code for adding extra rows");
    let newCount = numToDisplay + PAGE_SIZE;
    if (numToDisplay > tableData.length) {
      newCount = tableData.length;
    }
    setNumToDisplay(newCount)
  }

  const visibleData = tableData.slice(0, numToDisplay);
  
  return (
    <table>
    <TableHead headers={columns} />
    <TableBody tableData={visibleData} headers={columns} />
    </table>
    <fragment onClick=addNewRows>View more</fragment>
  );
};

我也不认为你需要TableBody上的rows属性，因为tableData和rows是一样的(从你的描述中我可以看出)。