Question

我正在使用reactjs构建一个应用程序，在某些时候我有一个SearchForm，然后我点击其中一个项目，在该视图中我有一个后退按钮。

我想要的是用以前的数据填充搜索表单。我已经通过javascript的localStorage实现了它。并且在componentWillUnmount上保存状态，问题是这个数据总是被加载，即使我没有从返回到达。

有没有办法在goBack中添加一种状态来告诉它？

Answer 1

所以，这里最好的方法是不使用localStorage，而是使用历史状态。

当用户更新表单时，您可以执行此操作（可选择去抖动以获得更好的性能）：

history.replaceState(this.props.location.pathname, {
  formData: JSON.stringify(formData),
});

然后当组件加载时，您可以像这样访问该状态：

const {location} = this.props;
const routeState = location.state && location.state.formData;
if (routeState) {
  this.setState({
    data: JSON.parse(routeState),
  });
}

如果他们刷新页面，或者转到另一个页面并返回，或者返回然后继续前进，他们将拥有该状态。如果他们在新标签中打开它们，他们就没有状态。这通常是你想要的流程。

在browserHistory.goBack之后发送信息

1 个答案: