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

Question

我有一个带有链接的“主页”组件，当您单击链接时，产品组件就会随产品一起加载。我还有另一个始终可见的组件，其中显示了“最近访问过的产品”的链接。在产品页面上时，这些链接不起作用。当我单击链接时，URL会更新，并且会进行渲染，但是产品组件不会随新产品一起更新。请参见以下示例： Codesandbox示例以下是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示例中，您可以取消注释“产品组件渲染”功能中的警报，以查看您在跟踪链接时呈现的警报，但没有任何反应。我不知道问题是什么...您能解释问题并找到解决方案吗？那很好啊！

Answer 1

由于产品组件已经加载，因此不会重新加载。您必须使用以下组件方法处理新产品ID

componentWillReceiveProps(nextProps) {

if(nextProps.match.params.name.product == oldProductId){

  return;

}else {

 //fetchnewProduct and set state to reload

}

使用最新版本的react（16.3.0起）

static getDerivedStateFromProps(nextProps, prevState){

   if(nextProps.productID !== prevState.productID){

     return { productID: nextProps.productID};

  } 

  else {

     return null;

  }

}

componentDidUpdate(prevProps, prevState) {

  if(prevProps.productID !== this.state.productID){

     //fetchnewProduct and set state to reload

  }

}