亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React不會在路線參數更改或查詢更改時重新加載組件數據

React不會在路線參數更改或查詢更改時重新加載組件數據

慕村9548890 2019-11-19 10:42:39
我有一個帶有鏈接的“主頁”組件,當您單擊鏈接時,產品組件就會隨產品一起加載。我還有另一個始終可見的組件,其中顯示了“最近訪問過的產品”的鏈接。在產品頁面上時,這些鏈接不起作用。當我單擊鏈接時,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示例中,您可以取消注釋“產品組件渲染”功能中的警報,以查看您在跟蹤鏈接時呈現的警報,但沒有任何反應。我不知道問題是什么...您能解釋問題并找到解決方案嗎?那很好?。?
查看完整描述

3 回答

?
蠱毒傳說

TA貢獻1895條經驗 獲得超3個贊

由于產品組件已經加載,因此不會重新加載。您必須使用以下組件方法處理新產品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

  }

}


查看完整回答
反對 回復 2019-11-19
  • 3 回答
  • 0 關注
  • 952 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號