Javascript 如何使componentdidupdate不是无限循环，或者是否有其他方法更新数据？

我有一个障碍，那就是如果我按下取消订单按钮（batalkan pesanan），就会出现一个无限循环，为什么我要使用componentdidupdate来更新新的显示，或者除了componentdidupdate还有更好的方法吗

按取消订单前（batalkan pesanan

无限循环发生

如果按下取消订单（batalkan pesanan）按钮后出现下图，该功能将进行更新

此代码：

import React, { Component } from "react";
import { Tabs, Spin } from "antd";
import { CustomTabPane } from "../../components/CustomTabDashboard";
import OrderListWaitingInDelivery from "../OrderListWaitingInDelivery";
import OrderListWaitingFinish from "../OrderListWaitingFinish";
import OrderListWaitingNotSent from "../OrderListWaitingNotSent";
import OrderListWaitingNotPay from "../OrderListWaitingNotPay";
import OrderDetailsDashboard from "../OrderDetailsDashboard";
import OrderDetailsCancel from "../OrderDetailsCancel";
import OrderListWaitingCancel from "../OrderListWaitingCancel";
import { apiGetWithToken } from "../../api/services";
import { PATH_DASHBOARD_TAB } from "../../api/path";
import NoOrderHistory from "../../components/NoOrderHistory";


const keyFnNames = {
  '1': 'updateTabNotPay',
  '2': 'updateTabNotSent',
  '3': 'updateTabInDelivery',
  '4': 'updateTabFinish',
  '5': 'updateTabCancel'
};

class CustomerOderNavigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowOrderDetailsDashboard: false,
      orderId: null,
      activeKey: "1",
      loading: false,
      productOrderNotYetPay: [],
      productOrderNotYetSent: [],
      productOrderInDelivery: [],
      productOrderFinish: [],
      productOrderCancel: []
    };
  }

  componentDidMount(){
    this.productOrderTabsNotYetPay();
  }

  componentDidUpdate() {
    this.productOrderTabsNotYetPay();
    //this.productOrderTabsNotYetSent();
    // this.productOrderTabsInDelivery();
    // this.productOrderTabsFinish();
    // this.productOrderTabsCancel();
  };

  componentWillUnmount() {
    this.setState({
      loading: false
    });
  }

  actionShowOrderListWaiting = () => {
    this.setState({
      isShowOrderDetailsDashboard: !this.state.isShowOrderDetailsDashboard
    });
  };

  actionShowOrderDetailsDashboard = (orderId) => {
    this.actionShowOrderListWaiting();
    this.setState({
      orderId: orderId
    })
  };

  productOrderTabsNotYetPay = async () => {
    try {
      const response = await apiGetWithToken(PATH_DASHBOARD_TAB.ORDER_STATUS_NOT_YET_PAID);
      const productOrderTabsNotYetPay = {
        productOrderNotYetPay: response.data.data
      };
      this.setState({
        ...productOrderTabsNotYetPay,
        loading: true
      });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  };

  productOrderTabsNotYetSent = async () => {
    try {
      const response = await apiGetWithToken(PATH_DASHBOARD_TAB.ORDER_STATUS_NOT_YET_SENT);
      const productOrderTabsNotYetSent = {
        productOrderNotYetSent: response.data.data,
        loading: true
      };
      this.setState({
        ...productOrderTabsNotYetSent
      });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  };

  productOrderTabsInDelivery = async () => {
    try {
      const response = await apiGetWithToken(PATH_DASHBOARD_TAB.ORDER_STATUS_IN_DELIVERY);
      const productOrderTabsInDelivery = {
        productOrderInDelivery: response.data.data
      };
      this.setState({
        ...productOrderTabsInDelivery,
        loading: true
      });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  };

  productOrderTabsFinish = async () => {
    try {
      const response = await apiGetWithToken(PATH_DASHBOARD_TAB.ORDER_STATUS_FINISH);
      const productOrderTabsFinish = {
        productOrderFinish: response.data.data
      };
      this.setState({
        ...productOrderTabsFinish,
        loading: true
      });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  };

  productOrderTabsCancel = async () => {
    try {
      const response = await apiGetWithToken(PATH_DASHBOARD_TAB.ORDER_STATUS_CANCEL);
      const productOrderTabsCancel = {
        productOrderCancel: response.data.data
      };
      this.setState({
        ...productOrderTabsCancel,
        loading: true
      });
    } catch (error) {
      console.log(error);
      this.setState({ loading: false });
    }
  };

  updateTabNotPay = () => {
    this.productOrderTabsNotYetPay();
  };

  updateTabNotSent = () => {
    this.productOrderTabsNotYetSent();
  };

  updateTabInDelivery = () => {
    this.productOrderTabsInDelivery();
  };

  updateTabFinish = () => {
    this.productOrderTabsFinish();
  };

  updateTabCancel = () => {
    this.productOrderTabsCancel();
  };

  handleChange = (selectedkey) => {
    this.setState({ activeKey: selectedkey })
    const fnName = keyFnNames[selectedkey];
    if (fnName) {
      this[fnName]();
    }
  };

  render() {
    return (
      <Tabs activeKey={this.state.activeKey} onChange={this.handleChange} >
        <CustomTabPane
          key={"1"}
          tab={
            <span
              onClick={() =>
                this.setState({
                  isShowOrderDetailsDashboard: false
                })}
            >{"Belum Bayar"}</span>}
          my_prop={
            this.state.productOrderNotYetPay.length < 1 ?
              (<Spin tip="Loading..." spinning={this.state.loading} delay={500}>
                <NoOrderHistory />
              </Spin>
              ) : (
                this.state.isShowOrderDetailsDashboard === false ?
                  (<OrderListWaitingNotPay
                    productOrderNotYetPay={this.state.productOrderNotYetPay}
                    actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                    tabsNotPay={1}
                  />) : (
                    <OrderDetailsDashboard
                      orderId={this.state.orderId}
                      actionShowOrderListWaiting={() => this.actionShowOrderListWaiting()}
                      tabsNotPay={1}
                    />)
              )
          }
        />
        <CustomTabPane
          key={"2"}
          tab={<span
            onClick={() =>
              this.setState({
                isShowOrderDetailsDashboard: false
              })}>{"Sedang Diproses"}</span>}
          my_prop={
            this.state.productOrderNotYetSent.length < 1 ?
              (<Spin tip="Loading..." spinning={this.state.loading} delay={500}>
                <NoOrderHistory /></Spin>
              ) : (
                this.state.isShowOrderDetailsDashboard === false ?
                  <OrderListWaitingNotSent
                    actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                    productOrderNotYetSent={this.state.productOrderNotYetSent}
                    tabsNotSent={2}
                  /> : (
                    <OrderDetailsDashboard orderId={this.state.orderId}
                      actionShowOrderListWaiting={() => this.actionShowOrderListWaiting()}
                      tabsNotSent={2}
                    />)
              )
          }
        />
        <CustomTabPane
          key={"3"}
          tab={<span
            onClick={() =>
              this.setState({
                isShowOrderDetailsDashboard: false
              })}>
            {"Dalam Pengiriman"}
          </span>}
          my_prop={
            this.state.productOrderInDelivery.length < 1 ?
              (<Spin tip="Loading..." spinning={this.state.loading} delay={500}>
                <NoOrderHistory /></Spin>
              ) : (
                this.state.isShowOrderDetailsDashboard === false ?
                  <OrderListWaitingInDelivery
                    productOrderInDelivery={this.state.productOrderInDelivery}
                    actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                    tabsInDelivery={3}
                  /> : (
                    <OrderDetailsDashboard orderId={this.state.orderId}
                      actionShowOrderListWaiting={() => this.actionShowOrderListWaiting()}
                      tabsInDelivery={3}
                    />)
              )
          } />
        <CustomTabPane
          key={"4"}
          tab={<span
            onClick={() =>
              this.setState({
                isShowOrderDetailsDashboard: false
              })}>{"Selesai"}</span>}
          my_prop={
            this.state.productOrderFinish.length < 1 ?
              (<Spin tip="Loading..." spinning={this.state.loading} delay={500}>
                <NoOrderHistory /></Spin>
              ) : (
                this.state.isShowOrderDetailsDashboard === false ?
                  <OrderListWaitingFinish
                    productOrderFinish={this.state.productOrderFinish}
                    actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                    tabsFinish={4}
                  /> : (
                    <OrderDetailsDashboard orderId={this.state.orderId}
                      actionShowOrderListWaiting={() => this.actionShowOrderListWaiting()}
                      tabsFinish={4}
                    />)
              )
          } />
        <CustomTabPane
          key={"5"}
          tab={<span
            onClick={() =>
              this.setState({
                isShowOrderDetailsDashboard: false
              })}>{"Batal"}</span>}
          my_prop={
            this.state.productOrderCancel.length < 1 ?
              (<Spin tip="Loading..." spinning={this.state.loading} delay={500}>
                <NoOrderHistory /></Spin>
              ) : (
                this.state.isShowOrderDetailsDashboard === false ?
                  <OrderListWaitingCancel
                    productOrderCancel={this.state.productOrderCancel}
                    actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                  /> : (
                    <OrderDetailsCancel orderId={this.state.orderId}
                      actionShowOrderListWaiting={() => this.actionShowOrderListWaiting()}
                    />)
              )
          }
        />
      </Tabs>
    );
  }
}

export default CustomerOderNavigation;

import React，{Component}来自“React”；
从“antd”导入{Tabs，Spin}；
从“../../components/CustomTabDashboard”导入{CustomTabPane}”；
从“./OrderListWaitingDelivery”导入OrderListWaitingDelivery；
从“./OrderListWaitingFinish”导入OrderListWaitingFinish；
从“./OrderListWaitingNotSent”导入OrderListWaitingNotSent；
从“./OrderListWaitingNotPay”导入OrderListWaitingNotPay；
从“./OrderDetailsDashboard”导入OrderDetailsDashboard；
从“./OrderDetailsCancel”导入OrderDetailsCancel；
从“./OrderListWaitingCancel”导入OrderListWaitingCancel；
从“../../api/services”导入{apiGetWithToken}”；
从“./../api/PATH”导入{PATH_DASHBOARD_TAB}；
从“../../components/NoOrderHistory”导入NoOrderHistory；
常量关键字名称={
“1”：“updateTabNotPay”，
“2”：“updateTabNotSent”，
“3”：“updateTabInDelivery”，
“4”：“updateTabFinish”，
“5”：“UpdateTableCancel”
};
类CustomerNavigation扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
isShowOrderDetailsDashboard:false，
orderId:null，
活动键：“1”，
加载：false，
productOrderNotYetPay:[]，
productOrderNotYetSent:[]，
productOrderInDelivery:[]，
productOrderFinish:[]，
productOrderCancel:[]
};
}
componentDidMount（）{
this.productOrderTabsNotYetPay（）；
}
componentDidUpdate（）{
this.productOrderTabsNotYetPay（）；
//this.productOrderTabsNotYetSent（）；
//此.productOrderTabsInDelivery（）；
//this.productOrderTabsFinish（）；
//this.productOrderTabsCancel（）；
};
组件将卸载（）{
这是我的国家({
加载：错误
});
}
actionShowOrderListWaiting=（）=>{
这是我的国家({
isShowOrderDetailsDashboard:！this.state.isShowOrderDetailsDashboard
});
};
actionShowOrderDetailsDashboard=（orderId）=>{
this.actionShowOrderListWaiting（）；
这是我的国家({
orderId:orderId
})
};
productOrderTabsNotYetPay=async（）=>{
试一试{
const response=wait apiGetWithToken（路径、仪表板、订单、状态、尚未付款）；
const productOrderTabsNotYetPay={
productOrderNotYetPay:response.data.data
};
这是我的国家({
…productOrderTabsNotYetPay，
加载：正确
});
}捕获（错误）{
console.log（错误）；
this.setState（{loading:false}）；
}
};
productOrderTabsNotYetSent=async（）=>{
试一试{
const response=WAIT apiGetWithToken（路径\仪表板\选项卡。订单\状态\尚未\发送）；
const productOrderTabsNotYetSent={
productOrderNotYetSent:response.data.data，
加载：正确
};
这是我的国家({
…productOrderTabsNotYetSent
});
}捕获（错误）{
console.log（错误）；
this.setState（{loading:false}）；
}
};
productOrderTabsInDelivery=async（）=>{
试一试{
const response=WAIT apiGetWithToken（路径\仪表板\选项卡。订单\状态\交付中）；
常量productOrderTabsInDelivery={
productOrderInDelivery:response.data.data
};
这是我的国家({
…productOrderTabsInDelivery，
加载：正确
});
}捕获（错误）{
console.log（错误）；
this.setState（{loading:false}）；
}
};
productOrderTabsFinish=async（）=>{
试一试{
const response=WAIT apiGetWithToken（路径、仪表板、订单、状态、完成）；
常量productOrderTabsFinish={
productOrderFinish:response.data.data
};
这是我的国家({
…productOrderTabsFinish，
加载：正确
});
}捕获（错误）{
console.log（错误）；
this.setState（{loading:false}）；
}
};
productOrderTabsCancel=async（）=>{
试一试{
const response=wait apiGetWithToken（路径\仪表板\选项卡。订单\状态\取消）；
常量productOrderTabsCancel={
productOrderCancel:response.data.data
};
这是我的国家({
…productOrderTabsCancel，
加载：正确
});
}捕获（错误）{
console.log（错误）；
this.setState（{loading:false}）；
}
};
updateTabNotPay=（）=>{
this.productOrderTabsNotYetPay（）；
};
UpdateTableNotSent=（）=>{
this.productOrderTabsNotYetSent（）；
};
updateTabInDelivery=（）=>{
此.productOrderTabsInDelivery（）；
};
updateTabFinish=（）=>{
this.productOrderTabsFinish（）；
};
UpdateTableCancel=（）=>{
this.productOrderTabsCancel（）；
};
handleChange=（selectedkey）=>{
this.setState（{activeKey:selectedkey}）
const fnName=keyFnNames[selectedkey]；
如果（名称）{
这个[名字]（）；
}
};
render（）{
返回(
{“Belum Bayar”}
我的道具={
this.state.productOrderNotYetPay.length是否小于1？
(
) : (
this.state.isShowOrderDetailsDashboard==false？
() : (
this.actionShowOrderListWaiting（）}
tabsNotPay={1}
/>)
)
}
/>
{“Sedang Diproses”}
我的道具={
this.state.productOrderNotYetSent.length是否小于1？
(
) : (
this.state.isShowOrderDetailsDashboard==false？
: (
this.actionShowOrderListWaiting（）}
componentDidUpdate(prevProps, prevState) {
  // yourConditionalExpression can be any of the following:
  // this.props.yourPropName !== prevProps.yourPropName
  // this.state.yourStateVariable !== prevState.yourStateVariable
  if (yourConditionalExpression) {
    this.productOrderTabsNotYetPay();
  }
}