react的componentWillReceiveProps生命周期,父子传值,子刷新页面。

     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("打印")
    }
  }

猜你喜欢

转载自blog.csdn.net/weixin_62226731/article/details/130059339