如何讓代碼等到滿足條件 x= true 時，請注意我不想使用“setTimeOut”

Question

如何讓代碼等到滿足條件 x= true ，請注意我不想使用“setTimeOut”：如果單擊按鈕時 x == true，我希望模式打開，我從 redux 獲得 x 值

{itemList &&
          itemList.map((item) => {
            return (
              <StyledMenuItem>
                <ListItemText          
                  primary={item.fieldName}
                  onClick={() => {
                    if (
                      !formPristine ||
                      (isChangesRowsFnc && isChangesRowsFnc())
                    ) {
                      var r = window.confirm("Press a button!");
                      if (r) {
                        customHandleSubmit();

                         if (x) {
                           setShowComponent(true);
                           handleClose();
                           item.props.setModalVisible(true);
                         }
                      }
                    } 
                  
                  }}
                />
                {showComponent === true && (
                  <div>
                    <item.comp
                      setShowComponent={setShowComponent}
                      key={item.name}
                      {...item.props}
                    />
                  </div>
                )}
              </StyledMenuItem>
            );
          })}
    

//我從redux獲取x值

const mapStateToProps = (state) => {
  return {
    x: state.stateReducer.animationStart,
  };
};

Answer 1

如果您正在使用 React，您可以利用React Docs中的生命周期方法。

在您的情況下，解決方案應該是：

  componentDidUpdate(prevProps) {
      if (prevProps.x ===false && prevProps.x!==this.props.x) {
        /// do your code here
      }
    }

請注意不要在此處創建無限循環。

另外，如果您使用的是函數式組件，請使用React hooks