Question

我试图从基本组件推送到另一个组件，其中一些数据在基本组件中定义，并以history.push作为参数发送。

Base Component

class BaseComponent extends React.Component
{
    gotoTargetPage()
    {
      const params = { data: {fname: 'john', lname: 'doe' } };
      this.props.history.push('/target-page', params);
    }

    render()
    {
      return( <button onClick={event => this.gotoTargetPage()}>Go!</button>)
    }
}

export default withRouter(BaseComponent);

TargetPage Component:

class TargetComponent extends React.Component
{
    componentDidMount()
    {
      console.log(this.props.history.location.state.data);
    }

    render()
    {
      return( <div>Hi! I am {this.props.history.location.state.data.fname}.</div>)
    }
}

当我单击基本组件上的按钮时，它会成功加载目标页面。但是控制台将this.props.history.state记录为undefined，并且它会在没有参数的情况下呈现数据（因为它不可用）。

这就是扭曲。如果我刷新页面，我可以看到正在显示的数据，控制台正确记录数据。不仅仅是我刷新但是如果我点击后退按钮（在第一步之后），则显示数据并且控制台记录数据。此外，这种情况大约发生在75％的时间，并且在大约四分之一的尝试中，它没有任何问题。

我重复创建新组件的相同情况，但结果相同。这可能是什么原因？

Environment:

"react": "^15.5.4",
"react-router": "^4.1.1"

Answer 1

我想你可能会合并history.push()的两个签名（见https://github.com/reacttraining/history）

您传递路径URL和可选状态对象

history.push('/some/path', { some: 'state' })

或者您将所有内容传递到单个对象中

history.push({ 
    pathname: '/home',
    state: { some: 'state' }
})

Answer 2

问题是该组件由于其他原因再次重新渲染，然后道具将丢失发送的参数，从而设置this.props.history.location = undefined。以下方法对我有用。

/**
 * When component mounts, grab the params if there is any and setState
 */
componentWillMount()
{
    // when params sent via url
    if (this.props.history.location.state)
    {
        let params = this.props.history.location.state;
        this.setState({ params });
    }
}

由于数据现在存储在组件状态中，因此不会丢失并且随处可用。

Answer 3

为了访问通过history.push（）传递的类组件中的数据，

代替：

 {this.props.history.location.state.data.fname}

使用

 {this.props.history.location.state.fname}

通过this.props.history.push传递的数据在目标页面中有奇怪的行为

3 个答案: