1. 点击左选择,绿色部分要全部刷新(包括tabs也要改变)。
2.点击左选择根据选择获取的isTabSelect参数值去判断展示哪个子组件(子组件不同的是tabs名不同和接口不同)。但是右选择的参数值是需要传给子组件去重新刷新数据的(不能更改tabs名)。
//isTabSelect是左选择 isOrderSelect是右选择参数
<View className={isTabSelect == 0 ? "show" :"hidden"}>
<StorePanel //子组件
isOrderSelect={isOrderSelect}
></StorePanel>
</View>
<View className={isTabSelect == 1 ? "show" : "hidden"}>
<TicketPanel
isOrderSelect={isOrderSelect}
></TicketPanel>
</View>
3.问题来了,右选择参数选择后,页面数据并没有刷新。(原因是左选择参数isTabSelect是控制子组件的,但是isTabSelect并没有变化,目前选择右选择后只是传给了子组件,子组件并没有给接收的值去处理。)
4.所以要在子组件添加componentWillReceiveProps(当props发生变化时执行componentWillReceiveProps,一般用于父组件状态更新时子组件的重新渲染),对比前后props不同后,调用接口,就能刷新页面啦!
componentWillReceiveProps(nextProps){ //第一个参数代表即将传入的新的Props
const { dispatch } = this.props;
const {
currentState,
pageNo,
pageSize,
customerId,
merchantId,
} = this.state;
if(this.props.isOrderSelect !== nextProps.isOrderSelect){
dispatch({
type: "userOrder/listPageCustomer",
payload: {typr:isOrderSelect},
}).then(() => {
console.log("打印")
}
}