重定向到同一组件重新渲染

Question

我使用相同的Form组件来编辑帖子并在应用程序中添加新帖子。Form的组件DidMount如下所示：

componentDidMount() {
this.props.match ? this.props.dispa({
type: 'ON_LOAD_ACTION',
payload: this.props.fetch.data.find(x => x.id == this.props.match.params.id)
}) : this.props.dispa({
type: 'ON_RESET',
payload: ''
});
}

它检查URL上是否有id，例如localhost:3000/edit/id

我正在尝试更新一篇帖子。我提取帖子的数据，然后用它填充表单。如果URL上没有id，我只会将表单清空。第二个分派用于将状态重置为其初始状态。

我使用react-router/redux，我的问题是当我在编辑表单上点击创建表单时。它不会重新呈现，我得到了我所在帖子的值。我想这是因为我重定向到了同一个表单。

<Route exact path="/create" >
<FromProduct />
</Route>
<Route exact path="/edit/:id" component={FromProduct}></Route>

但如果我点击submit按钮更新帖子，或者我先转到/home，组件会完美地重新渲染。

Answer 1

有不同的方法可以看到问题：

1. React路由器不会在每次路由更改时卸载FromProduct组件。这导致了您所描述的行为，您总是看到相同的组件。您可以尝试使用内联函数强制重新渲染
2. 由于不再调用componentDidMount，因此可以在FromProduct组件上使用componentWillReceiveProps。这样，对于每一次路线更改，即使它已经挂载，它也会被执行，因为它现在会收到新的道具

不建议使用解决方案#1解决方案#2会做这样的事情：

componentWillReceiveProps(newProps) {
// very similar logic for componentDidMount
// but use newProps instead of this.props
}

如果你仍然想尝试解决方案#1，请在这里查看React路由器关于内联渲染的文档。