React不会在路线参数更改或查询更改时重新加载组件数据

小编典典

React不会在路线参数更改或查询更改时重新加载组件数据

javascript

我有一个带有链接的“主页”组件，当您单击链接时，产品组件就会随产品一起加载。我还有另一个始终可见的组件，其中显示了“最近访问过的产品”的链接。

在产品页面上时，这些链接不起作用。当我单击链接时，URL会更新，并且会进行渲染，但是产品组件不会随新产品一起更新。

以下是index.js中的路由：

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

ProductHistory中的链接如下所示：

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

所以他们匹配Route path="/products/:product"。

当我在产品页面上并尝试遵循ProductHistory链接时，URL会更新并进行渲染，但组件数据不会更改。在Codesandbox示例中，您可以取消注释“产品组件渲染”功能中的警报，以查看您在跟踪链接时呈现的警报，但没有任何反应。

我不知道问题出在哪里…您能解释问题并找到解决方案吗？那很好啊！

阅读 316

2020-05-01

共1个答案

小编典典

与一起componentDidMount，您还需要在页面中实现componentWillReceiveProps或使用getDerivedStateFromProps（从v16.3.0起），Products因为同一组件已re-rendered更新，params并且notre-mounted当您更改路线参数时，这是因为参数是作为prop传递给组件的，而onprops会发生变化，React组件会重新渲染而不是重新安装。

编辑：
从v16.3.0起，用于getDerivedStateFromProps根据道具设置/更新状态（无需在两种不同的生命周期方法中指定它）

static getDerivedStateFromProps(nextProps, prevState) {
   if (nextProps.match.params.product !== prevState.currentProductId){
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
     return {

        product: result[0],
        currentId: currentProductId,
        result

      }
  }
  return null;
}

在v16.3.0之前的版本中，您将使用componentWillReceiveProps

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.product !== this.props.match.params.product) {
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
      this.setState({

        product: result[0],
        currentId: currentProductId,
        result

      })
    }
  }

2020-05-01