React中如何仅传递选中表格行数据至编辑组件？

问题描述 #

我用ReactJS开发了一个应用，已从API获取数据并展示为表格，现在需要跳转到编辑页面修改选中行的数据。我误以为当前传递的是全部数据，希望改为仅传递选中的行数据，以下是我的代码：

编辑列代码片段 #

{
    name:'Action',
    cell: (row) => (<p className='actions'><span onClick={()=>navigateToConfirmed(row)}><FaPencilAlt/></span><span><FaTrashAlt/></span></p>),
    sortable: true
},

Accounts.js 完整代码 #

import React, { useState, useEffect } from "react"; 
import {Card, Col, OverlayTrigger, Row, Tooltip, Table } from "react-bootstrap"; 
import DataTable from 'react-data-table-component';
import DataTableExtensions from 'react-data-table-component-extensions';
import 'react-data-table-component-extensions/dist/index.css'; 
import {Link, useNavigate } from "react-router-dom"; 
import axios from "axios"; 
import { FaPencilAlt, FaTrashAlt, FaPlus} from "react-icons/fa"; 

const Accounts = (props) => {
  const navigate = useNavigate();   
  const [data, setData] = useState([]);
  const [search, setSearch] = useState('');
  const [filtername, setfiltername] = useState('');

  useEffect(() => {
    axios("https://rwood.znapay.in:5001/all/account/datas")
      .then((res) => {
        setData(res.data);
        setfiltername(res.data);
        console.log(res.data)
      })
      .catch((err) => console.log(err));
  }, []);

  const columns=[
    {
      name:'Account Name',
      selector:(row)=>row.account_name,
      sortable: true
    },
    {
      name:'Account Number',
      selector:(row)=>row.account_number,
      sortable: true
    },
    {
      name:'Account Owner',
      selector:(row)=>row.account_owner,
      sortable: true
    },
    {
      name:'Annual Revenue',
      selector:(row)=>row.annual_revenue,
      sortable: true
    },
    {
      name:'Billing Address',
      selector:(row)=>row.billing_address,
      sortable: true
    },
    {
      name:'Fax',
      selector:(row)=>row.fax,
      sortable: true
    },
    {
      name:'Action',
      cell: (row) => (<p className='actions'><span onClick={()=>navigateToConfirmed(row)}><FaPencilAlt/></span><span><FaTrashAlt/></span></p>),
      sortable: true
    },
  ]

  const navigateToConfirmed= (row) =>{
    navigate(`/accountedit`, { state: row}); // 跳转时传递当前行数据
 }

  return (
    <>
      <div className="page-header">
        <div>
          <h2 className="main-content-title tx-24 mg-b-5">Account List</h2>
          <ol className="breadcrumb"> 
            <li className="breadcrumb-item active" aria-current="page">Dashboard / Account</li>
          </ol>
        </div>
        <div className="d-flex">
          <div className="justify-content-center">
            <button type="button" className="btn btn-primary my-2 btn-icon-text">
              <Link to='/account/addaccount'> <i className="fe fe-download-cloud me-2"></i><FaPlus/> Add Account</Link>
            </button>
          </div>
        </div> 
      </div>
      <div className=" tasks">
        <DataTable
          columns={columns} 
          data={data} 
          pagination
          persistTableHead
          highlightOnHover
          action
          subHeader 
        />
      </div>
    </>
  );
}

export default Accounts;

Accountedit.js 完整代码 #

import { useLocation} from "react-router-dom"; 

export default function Accountedit(){
    const {state} = useLocation();
    console.log(state)
    return(
        <>
        </>
    )
}

解决方案 #

你的代码其实已经实现了单行编辑时传递选中行数据，navigateToConfirmed函数中传递的row就是当前点击的单条行数据，而非全部数据。以下是验证和优化方案：

方案1：确认单行编辑的正确性 #

修改Accountedit.js，将传递过来的行数据展示出来，验证是否为单条选中数据：

import { useLocation } from "react-router-dom"; 

export default function Accountedit(){
    const { state } = useLocation();
    // 控制台打印确认数据
    console.log("当前编辑的行数据：", state);
    
    return(
        <div className="edit-page">
            <h3>编辑账户信息</h3>
            <div className="form-group">
                <label>账户名称</label>
                <input type="text" defaultValue={state?.account_name} className="form-control" />
            </div>
            <div className="form-group">
                <label>账户号码</label>
                <input type="text" defaultValue={state?.account_number} className="form-control" />
            </div>
            {/* 其他字段同理渲染 */}
        </div>
    )
}

方案2：实现多选批量编辑（如果需要） #

如果你的需求是选中多行后批量编辑，需要开启DataTable的多选功能，修改Accounts.js如下：

1. 添加选中行状态管理：

const [selectedRows, setSelectedRows] = useState([]);

2. 给DataTable添加多选配置：

<DataTable
    columns={columns} 
    data={data} 
    pagination
    persistTableHead
    highlightOnHover
    action
    subHeader
    // 开启多选功能
    selectableRows
    // 监听选中行变化
    onSelectedRowsChange={({ selectedRows }) => setSelectedRows(selectedRows)}
/>

3. 添加批量编辑按钮：
   在页面头部的按钮区域添加批量编辑按钮：

<button 
    type="button" 
    className="btn btn-secondary my-2 btn-icon-text ms-2"
    onClick={() => navigateToBulkEdit()}
    // 无选中项时禁用按钮
    disabled={selectedRows.length === 0}
>
    <FaPencilAlt /> 批量编辑选中项
</button>

4. 实现批量编辑跳转函数：

const navigateToBulkEdit = () => {
    navigate(`/accountedit`, { state: selectedRows });
};

5. 在Accountedit.js中接收并处理多行数据：

import { useLocation } from "react-router-dom"; 

export default function Accountedit(){
    const { state: selectedRows } = useLocation();
    console.log("选中的多行数据：", selectedRows);
    
    return(
        <div>
            <h3>批量编辑账户</h3>
            {selectedRows.map((row, index) => (
                <div key={index} className="account-item">
                    <p>账户名称：{row.account_name}</p>
                    <p>账户号码：{row.account_number}</p>
                    {/* 其他字段 */}
                </div>
            ))}
        </div>
    )
}

内容的提问来源于stack exchange，提问作者karthik