我有一个带有链接的“主页”组件,当您单击链接时,产品组件就会随产品一起加载。我还有另一个始终可见的组件,其中显示了“最近访问过的产品”的链接。
在产品页面上时,这些链接不起作用。当我单击链接时,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"。
Route path="/products/:product"
当我在产品页面上并尝试遵循ProductHistory链接时,URL会更新并进行渲染,但组件数据不会更改。在Codesandbox示例中,您可以取消注释“产品组件渲染”功能中的警报,以查看您在跟踪链接时呈现的警报,但没有任何反应。
我不知道问题出在哪里…您能解释问题并找到解决方案吗?那很好啊!
与一起componentDidMount,您还需要在页面中实现componentWillReceiveProps或使用getDerivedStateFromProps(从v16.3.0起),Products因为同一组件已re-rendered更新,params并且notre-mounted当您更改路线参数时,这是因为参数是作为prop传递给组件的,而onprops会发生变化,React组件会重新渲染而不是重新安装。
componentDidMount
componentWillReceiveProps
getDerivedStateFromProps
Products
re-rendered
params
notre-mounted
编辑: 从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 }) } }