react更改路由入参_javascript – React不会在路由参数更改或查询更改时重新加载组件数据...

与componentDidMount一起,您还需要在Products页面中实现componentWillReceiveProps函数,因为相同的组件使用更新的参数重新渲染,而不是在更改路径参数时重新安装,这是因为params作为props传递给组件,在道具改变,React组件重新渲染而不是重新安装.

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

})

}

}

使用最新版本的React(v16.3.0以后),您可以使用getDerivedStateFromProps基于props设置/更新状态(无需在两种不同的生命周期方法中指定它)

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;

}