使用React与Material UI时调用一次Alert后后续Alert无法触发如何解决

问题原因 #

你当前的代码中handleRead是异步函数，内部的markMessageRead接口请求完成后才会触发提示。在handleReply中调用handleRead后立即执行的handleOpenAlert("Reply successfully")会被后续handleRead返回后触发的Mark as read提示覆盖，所以最终只显示后者。

实现方案（满足不删除原有handleRead内提示代码的要求） #

给handleRead新增一个可选的skipAlert参数，默认值为false，不影响原有单独点击「Read」按钮的提示逻辑，调用时传参即可跳过内部提示：

修改后的handleRead代码 #

const handleRead = async (skipAlert = false) => {
      await markMessageRead(selectedMessage.id)
           .then(res => {
               // 仅当不需要跳过提示时执行原有弹窗逻辑
               if (!skipAlert) {
                   handleOpenAlert("Mark as read", "success")
               }
           })
           .catch(err => {
               console.log(err.response)
           })
}

修改后的handleReply代码 #

const handleReply = async () => {
      await replyToMessage(selectedMessage.id, messageRef.current.value)
          .then(async res => {
           if (res.status === 200) {
              // 传入true跳过handleRead内部的弹窗，加await保证标记已读逻辑执行完成
              await handleRead(true)
              handleOpenAlert("Reply successfully", "success")
           }
          })
          .catch(err => {
              console.log(err.response)
          })
}

内容的提问来源于stack exchange，提问作者Kii