React's componentWillReceiveProps life cycle, passing values from parent to child, and refreshing the page from child to child.

     1. Click the left selection, the green part will be refreshed completely (including tabs should also be changed).

2. Click the left selection to determine which sub-component to display according to the isTabSelect parameter value obtained by the selection (the difference between the sub-components is that the tabs name is different and the interface is different). But the parameter value of the right selection needs to be passed to the subcomponent to refresh the data (the tabs name cannot be changed).

      //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. Here comes the problem. After the right selection parameter is selected, the page data is not refreshed. (The reason is that the left selection parameter isTabSelect controls the subcomponent, but isTabSelect has not changed. Currently, after selecting the right selection, it is only passed to the subcomponent, and the subcomponent does not process the received value.)

4. Therefore, add componentWillReceiveProps to the subcomponent (execute componentWillReceiveProps when the props change, which is generally used for re-rendering of the subcomponent when the state of the parent component is updated). After comparing the different props before and after, call the interface to refresh the page!

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

Guess you like

Origin blog.csdn.net/weixin_62226731/article/details/130059339