history.push()传参失效：跳转DataForm时card数据未传递

我来帮你排查这个问题，你遇到的card在DataForm中显示undefined的情况，大概率是这几个原因之一，咱们一步步来解决：

1. DataForm中获取state的方式错误 #

首先要明确：通过history.push传递的state是挂载在location对象下的，并非直接作为组件props存在。

如果你在DataForm中直接写this.props.card，那必然会拿到undefined。正确的获取方式应该是：

// 在DataForm组件内
const card = this.props.location.state?.card;

这里用可选链操作符?.是为了避免当state不存在（比如页面刷新）时抛出报错。

2. DataForm未接收到路由相关props #

如果你的DataForm组件被高阶组件（比如Redux的connect）包裹，React Router自动注入的location、history等props会被覆盖，导致你无法拿到传递的state。

解决方法是用withRouter高阶组件包裹DataForm，确保它能获取到路由相关的props：

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

class DataForm extends React.Component {
  componentDidMount() {
    const card = this.props.location.state?.card;
    console.log(card); // 现在应该能拿到数据了
  }
  // 其他组件逻辑
}

// 用withRouter包裹后导出组件
export default withRouter(DataForm);

3. 页面刷新导致state丢失 #

history.push传递的state是存在浏览器内存中的，一旦页面刷新，state就会被清空，此时location.state会变成undefined。

如果需要在刷新后也能保留数据，你可以做以下两种优化：

• 把卡片的唯一标识（比如card.label）放到URL参数里，在DataForm中通过match.params拿到标识后，重新从你的data数组中匹配对应的card对象：

  // 在DataForm组件内
  componentDidMount() {
    const { name } = this.props.match.params;
    // 假设data数组在DataForm中可访问
    const card = data.find(item => item.label === name);
    console.log(card);
  }
  

• 或者在跳转时把数据临时存入localStorage，在DataForm中读取后再移除：

  // 在onClickForm方法中
  onClickForm = card => {
    const {action} = this.props;
    localStorage.setItem('selectedCard', JSON.stringify(card));
    this.props.history.push({
      pathname: `/user/${action}/${card.label}`,
    });
  };
  
  // 在DataForm组件内
  componentDidMount() {
    const cardStr = localStorage.getItem('selectedCard');
    const card = cardStr ? JSON.parse(cardStr) : null;
    localStorage.removeItem('selectedCard'); // 用完及时清理
    console.log(card);
  }
  

额外检查点 #

你可以先在onClickForm里打印card和action的值，确认传递的参数本身是正确的，避免因为action为空或者card数据异常导致跳转后的问题。

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