由于状态，模态在错误的时间弹出

如何解决由于状态，模态在错误的时间弹出

所以我有两个我正在使用的模态，其中一个已经实现并按预期运行，但是当我根据 if there is any true value when mapping over the array 的条件添加另一个模态时，它现在的工作方式两个模态都显示当有 true 值时。我认为这是因为在 true 出现之前，我的 false 函数返回了多个 .includes() 值。我认为一个很好的解决方案是在条目上运行 .includes() 时创建一个包含所有返回值的数组，然后我可以检查该数组是否有任何 true 值，但我似乎无法得到值放入数组中。当我尝试将它们推入一个数组时，它们只是全部推入自己单独的数组中。如果您能解释一下什么是更好的方法，这可能是错误的方法：

const checkPending = () => {
    if(entries){
      entries.map(descriptions => {
        const desc = descriptions.description
        //check if there are any pending tests
        const check = desc.includes("pending")
       //if the check returns true show the pending modal if it doesnt set the other modal to true
        if(check === true){
          setShowModal(false)
          setShowPendingM(true)
         
        }else{
          setShowModal(true)
        }
      })

    }
  }

    return(
         <Button
          onClick={() => checkPending()}
          className={`${styles.headerButton} mr-2`}
           >
          Add File&nbsp;&nbsp;
          <Plus />
        </Button>
)

setShowModal 和 setShowPendingM 都是从父组件作为 props 传递的。它们都被初始化为 false。我能提出的最直接的问题是is there any way to say if there are any true values returned from .includes then do something even if there are false values present

解决方法

我认为您的 checkingPending 方法应该是这样的。

const checkPending = () => {
    if(entries){
      let pending = false;
      entries.forEach((descriptions) => {
        const desc = descriptions.description
        if(desc.includes('pending')){
            pending = true;
        }
      });
      if(pending) {
          setShowModal(false);
          setShowPendingM(true);
      } else {
          setShowModal(true);
          setShowPendingM(false);
      }
    }
  }

如果您有任何其他问题，请告诉我。