如何用React/Redux实现DataTable行数据跳转页面并填充字段？

嘿，我来帮你拆解这两个需求的实现方案，分React原生（不用Redux）和Redux两种场景来说，都是实际项目里常用的做法：

1. React原生实现（无Redux） #

这种方式适合简单的单页面场景，用组件state来管理编辑数据：

• 第一步，给DataTable的每一行添加编辑按钮，点击时将当前行数据传递给父组件的state：

// 表格行组件
const TableRow = ({ rowData, onEdit }) => (
  <tr>
    <td>{rowData.name}</td>
    <td>{rowData.email}</td>
    <td>
      <button onClick={() => onEdit(rowData)}>编辑</button>
    </td>
  </tr>
);

// 父页面组件
const DataTablePage = () => {
  const [editFormData, setEditFormData] = useState(null);

  const handleEdit = (rowData) => {
    // 将选中的行数据存入state，触发表单渲染
    setEditFormData(rowData);
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {/* 假设data是你的数据源数组 */}
          {data.map(row => <TableRow key={row.id} rowData={row} onEdit={handleEdit} />)}
        </tbody>
      </table>
      
      {/* 编辑表单：当editFormData有值时显示 */}
      {editFormData && (
        <EditForm initialData={editFormData} />
      )}
    </div>
  );
};

• 第二步，编辑表单组件根据传入的初始数据填充字段：

const EditForm = ({ initialData }) => {
  const [formData, setFormData] = useState(initialData);

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form className="edit-form">
      <div>
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">保存修改</button>
    </form>
  );
};

2. Redux实现（适合多组件共享数据） #

如果你的项目已经用了Redux，或者需要在多个组件间共享编辑数据，可以用store来管理：

• 第一步，定义Redux的action和reducer：

// actions.js
export const SET_EDIT_DATA = 'SET_EDIT_DATA';
export const CLEAR_EDIT_DATA = 'CLEAR_EDIT_DATA';

export const setEditData = (data) => ({
  type: SET_EDIT_DATA,
  payload: data
});

export const clearEditData = () => ({
  type: CLEAR_EDIT_DATA
});

// reducer.js
const initialState = {
  editData: null
};

export const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_EDIT_DATA:
      return { ...state, editData: action.payload };
    case CLEAR_EDIT_DATA:
      return { ...state, editData: null };
    default:
      return state;
  }
};

• 第二步，在TableRow组件中点击编辑按钮时，dispatch action存入数据：

import { useDispatch } from 'react-redux';
import { setEditData } from './actions';

const TableRow = ({ rowData }) => {
  const dispatch = useDispatch();

  const handleEdit = () => {
    dispatch(setEditData(rowData));
    // 如果需要跳转到单独的编辑页面，这里可以用react-router的navigate
    // navigate('/edit-page');
  };

  return (
    <tr>
      <td>{rowData.name}</td>
      <td>{rowData.email}</td>
      <td>
        <button onClick={handleEdit}>编辑</button>
      </td>
    </tr>
  );
};

• 第三步，在编辑表单组件中，用useSelector获取store中的数据填充字段：

import { useSelector } from 'react-redux';

const EditForm = () => {
  const editData = useSelector(state => state.data.editData);
  const [formData, setFormData] = useState(editData || {});

  // 表单输入逻辑和之前一致
  const handleInputChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  if (!editData) return <div>请选择要编辑的数据</div>;

  return (
    <form className="edit-form">
      <div>
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">保存修改</button>
    </form>
  );
};

1. React Router路由参数传递（推荐小数据场景） #

如果编辑页面是单独的路由页面，最常用的是通过路由传递数据：

方式1：传递ID，编辑页面重新请求数据（推荐） #

这种方式的好处是URL更干净，刷新页面也能重新获取数据：

// TableRow组件中跳转
import { useNavigate } from 'react-router-dom';

const TableRow = ({ rowData }) => {
  const navigate = useNavigate();

  const handleEdit = () => {
    // 把行ID作为路由参数传递
    navigate(`/edit/${rowData.id}`);
  };

  return <tr>...</tr>;
};

// 编辑页面获取ID并请求数据
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

const EditPage = () => {
  const { id } = useParams();
  const [formData, setFormData] = useState(null);

  useEffect(() => {
    // 根据ID调用API获取详情数据
    fetch(`/api/data/${id}`)
      .then(res => res.json())
      .then(data => setFormData(data));
  }, [id]);

  if (!formData) return <div>加载中...</div>;

  return <EditForm initialData={formData} />;
};

方式2：通过路由state传递完整数据（适合无需再次请求的小数据） #

// TableRow组件中跳转
import { useNavigate } from 'react-router-dom';

const TableRow = ({ rowData }) => {
  const navigate = useNavigate();

  const handleEdit = () => {
    // 把完整行数据存入路由state
    navigate('/edit', { state: { rowData } });
  };

  return <tr>...</tr>;
};

// 编辑页面获取state数据
import { useLocation } from 'react-router-dom';

const EditPage = () => {
  const location = useLocation();
  const rowData = location.state?.rowData;

  if (!rowData) return <div>无有效编辑数据</div>;

  return <EditForm initialData={rowData} />;
};

2. Redux传递（适合大数据/多页面共享场景） #

和单页面的Redux逻辑类似，点击编辑按钮时把行数据存入store，然后在编辑页面直接从store取数据：

// 编辑页面组件
import { useSelector, useDispatch } from 'react-redux';
import { clearEditData } from './actions';
import { useEffect } from 'react';

const EditPage = () => {
  const dispatch = useDispatch();
  const editData = useSelector(state => state.data.editData);

  // 页面卸载时清空store中的编辑数据，避免影响下次进入
  useEffect(() => {
    return () => {
      dispatch(clearEditData());
    };
  }, [dispatch]);

  if (!editData) return <div>请选择要编辑的数据</div>;

  return <EditForm initialData={editData} />;
};

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