this.props.history.push 有状态

Question

我正在为我的协会在 React 下编写一个网站，尽管我进行了研究，但我有一些我无法解决的问题。这是我在 React 下的第一个项目，我正在自学。

在 'App' 中，我有一些运行良好的路线其中之一是 'Login'，一个是 'Subscription'，一个是 'Member'。 'Member' 组件与其他路由类似 'App' 仅供连接的成员使用。

'Subscription' 组件有状态 'step' 并且仅显示当前步骤（问题列表）。

当会员登录时，根据帐户状态重定向到会员页面。如果会员使用临时密码登录，他将被重定向到 'Subscription' 和

的密码步骤

this.props.history.push({pathname: "/Subscription", state: {step: "password"}});

效果很好。

现在，当用户单击编辑字段更改密码时，我想从 'Account' 组件执行相同的重定向，然后我使用了相同的代码。但这是行不通的。我被正确重定向到 'Subscription' 但在第一步而不是“密码”步骤。

正如我所见，当我从 'Account' 组件执行此操作时，状态步骤丢失并变得未定义。如果我将 'Account' 从 'Members' 移动到 'App'，这有效。

我认为这是因为 'Account' 和 'Subscription' 不在同一级别，不像 'Login' 和 'Subscription' 直接在 'App' 下面，但我不知道状态在哪里丢失，我不知道在这种情况下如何正确传递状态。我也不想把'Account'直接移到'App'下。

你有什么想法吗？

Answer 1

我解决了我的问题。不管我怎么想，当使用 history.push 时，状态不会抛给被调用的组件，而只会抛给使用 history.push 的组件的父级。在我的例子中，当我从帐户使用 history.push 时，状态被发送到成员组件，然后当我被重定向到订阅时，我不再有状态，因为它不是成员的子组件。

为了解决我的问题，我在 App 中配置了一个状态，并通过将函数从 App 传递到 Member 再到 Account 来更新此状态，然后，当我调用 Subscription 时，我从 App 发送状态。

我听说过 Redux，但在学习 React 时，我喜欢在使用无法帮助我理解它的实际工作原理的第三方库之前自己做所有事情。

this.props.history.push with state