如何将row值传递至子文件EditRecord？跳转后父组件props丢失

你的代码存在两个核心问题导致record props丢失：

1. 使用href跳转页面会触发浏览器刷新，React组件的state会被重置，所以传递给子组件的record会丢失。
2. 你在表格的每一行里都渲染了一个EditRecord组件，这并不是合理的页面跳转逻辑，应该是点击按钮后导航到单独的编辑页面/组件并传递数据。

方案一：React Router 单页导航（推荐） #

如果你的项目是单页应用，用React Router实现无刷新导航并传递数据是最优解：

父组件修改 #

import { useNavigate } from 'react-router-dom';

// ...

const navigate = useNavigate();
const [record, setRecord] = React.useState({});

return ( 
  <TableBody>
          {stableSort(props.data, getComparator(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map((row, index) => (   
                <TableRow 
                    className={(classes.tableAltenativeColor, classes.tableRow)}
                    key={index}
                >  
                    <TableCell style={{verticalAlign: 'top'}}>                                                                                                                                  
                          <Button                            
                            onClick={() => {
                              // 直接传递row对象到编辑页面的state中
                              navigate(`${config.home}edit`, { state: { record: row } });
                            }}
                            // 移除href，避免页面刷新
                          >                  
                              <EditNoteOutlined 
                                color="primary"                                             
                              />                                                           
                          </Button>  
                      {/* 移除循环内的EditRecord组件 */}
                    </TableCell>  
             ))}                  
    </TableBody>
 )

EditRecord组件接收数据 #

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

const EditRecord = () => {
  const location = useLocation();
  // 获取导航时传递的record
  const record = location.state?.record || {};

  // 后续业务逻辑
  return (
    // 你的编辑页面内容
  );
};

export default EditRecord;

方案二：URL参数传递（适合需要页面刷新的场景） #

如果必须通过页面跳转传递数据，可以把row转成URL参数：

父组件修改 #

return ( 
  <TableBody>
          {stableSort(props.data, getComparator(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map((row, index) => (   
                <TableRow 
                    className={(classes.tableAltenativeColor, classes.tableRow)}
                    key={index}
                >  
                    <TableCell style={{verticalAlign: 'top'}}>                                                                                                                                  
                          <Button                            
                            href={`${config.home}edit?record=${encodeURIComponent(JSON.stringify(row))}`}
                          >                  
                              <EditNoteOutlined 
                                color="primary"                                             
                              />                                                           
                          </Button>  
                      {/* 移除循环内的EditRecord组件 */}
                    </TableCell>  
             ))}                  
    </TableBody>
 )

EditRecord组件解析参数 #

const EditRecord = () => {
  const params = new URLSearchParams(window.location.search);
  const recordStr = params.get('record');
  const record = recordStr ? JSON.parse(decodeURIComponent(recordStr)) : {};

  // 后续业务逻辑
  return (
    // 你的编辑页面内容
  );
};

export default EditRecord;

额外优化点 #

• 不需要把row转成字符串存在state里，直接传递原始对象即可，避免后续解析的麻烦。
• 确保路由配置中正确映射了${config.home}edit路径到EditRecord组件。

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