重定向到同一个组件重新渲染答案

【问题标题】：redirect to the same component re render重定向到同一个组件重新渲染
【发布时间】：2020-03-28 10:50:59
【问题描述】：

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

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，组件会完美地重新渲染。

【问题讨论】：

查看这个答案：stackoverflow.com/questions/42701129/…
问题可能是componentDidMount没有被再次调用，因为组件已经挂载，尝试在componentDidUpdate方法中也加入这个检查。
嘿，我已经尝试了同样的结果
@FaroukYD 为这样的复杂场景提供沙箱（例如代码沙箱）示例总是很不错的。

标签： javascript reactjs react-redux react-router

【解决方案1】：

查看问题的方法有多种：

React-router 不会在每次 Route 更改时卸载 FromProduct 组件。这导致了您描述的行为，您总是看到相同的组件。您可以尝试使用内联函数强制重新渲染。
由于您的componentDidMount 不再被调用，您可以在FromProduct 组件上使用componentWillReceiveProps。这样，对于每个 Route 更改，即使已挂载它也会执行，因为它现在会收到新的 props。

不太推荐解决方案 #1。 解决方案 #2 将执行以下操作：

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

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

【讨论】：