慕村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
}
}
添加回答
舉報
0/150
提交
取消