React中如何将boxId传递至编辑组件以填充表单？

核心修复：给Operations列的render函数添加record参数 #

Ant Design Table的列配置中，render函数默认第一个参数就是当前行的record对象（包含该行所有数据），你之前未接收这个参数，所以无法获取boxId。按以下方式修改列配置：

import { Link } from 'react-router-dom';
import { Table } from 'antd';

// 表格列配置
const columns = [
  // 示例列：展示boxId
  {
    title: 'Box ID',
    dataIndex: 'boxId',
    key: 'boxId'
  },
  {
    title: '操作',
    key: 'operations',
    // 接收record参数，拿到当前行的boxId
    render: (record) => (
      // 动态拼接路由路径，将boxId传入
      <Link to={`/edit/${record.boxId}`}>编辑</Link>
    )
  }
];

// 表格使用示例
<Table 
  columns={columns} 
  dataSource={yourDataSource} // 你的数据源数组，每个元素需包含boxId字段
  rowKey="boxId" // 用boxId作为行唯一标识，避免控制台警告
/>

编辑组件获取boxId并填充Formik表单 #

在编辑组件中，通过路由参数提取boxId，请求数据库数据后设置为Formik的初始值：

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Formik, Form, Field } from 'formik';
// 这里用axios做示例，你可以替换成自己的请求库
import axios from 'axios';

const EditBox = () => {
  // 从路由参数中获取boxId
  const { boxId } = useParams();
  // 存储表单初始值
  const [initialFormValues, setInitialFormValues] = useState({});

  useEffect(() => {
    // 当boxId存在时，请求对应数据
    if (!boxId) return;

    const fetchBoxData = async () => {
      try {
        const res = await axios.get(`/api/boxes/${boxId}`);
        // 将接口返回的数据设置为Formik的初始值
        setInitialFormValues(res.data);
      } catch (err) {
        console.error('获取数据失败:', err);
      }
    };

    fetchBoxData();
  }, [boxId]);

  return (
    <Formik 
      initialValues={initialFormValues}
      onSubmit={(values) => {
        // 处理表单提交逻辑，比如将修改后的数据提交到后端
        console.log('提交的编辑数据:', values);
      }}
    >
      <Form>
        {/* 根据你的数据结构添加对应表单字段 */}
        <Field name="boxId" placeholder="Box ID" disabled />
        <Field name="boxName" placeholder="箱子名称" />
        <Field name="boxDesc" placeholder="箱子描述" />
        
        <button type="submit">保存修改</button>
      </Form>
    </Formik>
  );
};

export default EditBox;

补充：配置动态路由 #

确保你的路由配置中设置了动态参数，这样boxId才能被正确解析：

import { Routes, Route } from 'react-router-dom';
import EditBox from './components/EditBox';

function App() {
  return (
    <Routes>
      {/* 其他路由配置 */}
      <Route path="/edit/:boxId" element={<EditBox />} />
    </Routes>
  );
}

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