Javascript 如何通过多次单击按钮来解析React.js状态？

我在中附加了代码，并在上附加了视频。您可以看到在短时间内进行多次单击时实际发生的情况。所以，我试了很多，但什么也没发生

因此，问题是：

• 当多次单击“发送消息”-“取消”时，应用程序会记住上一次单击并很快隐藏“取消”按钮
• 当未发送反馈消息时，底部消息也会发生同样的情况

任何帮助都将不胜感激

已编辑：

此外，我需要将警报与按钮放在一行。没有跨度，就没有帮助

---

您需要在某个地方调用clearTimeout。例如，调用setTimeout时，可以将返回的值存储为类的属性（或状态）

this.timer = setTimeout(() => { .... }, 4000)

然后在“取消”方法中，您可以按如下方式终止计时器：

clearTimeout(this.timer)

---

在我看来，你的计时器太多了。。。我想这里只要一个就足够了。

您需要在某个地方调用clearTimeout。例如，调用setTimeout时，可以将返回的值存储为类的属性（或状态）

this.timer = setTimeout(() => { .... }, 4000)

然后在“取消”方法中，您可以按如下方式终止计时器：

clearTimeout(this.timer)

---

在我看来，你的计时器太多了。。。我想这里只要一个就足够了。

解决这个问题的方法可能很多。。。我过去所做的就是给每个API调用一个id，然后当它返回时检查以确保这是API调用的当前id。大概是这样的：

sendApi（）{
const currentCallId=uuid（）//或某个随机id生成器
这是我的国家({
孤岛加载：是的，
无效反馈：false，
是的，
inputDisabled:true，
当前呼叫
});
设置超时（（）=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
if（this.state.isLoading&&this.state.showTimer）{
这是我的国家({
showTimer:false
});
}
}, 4000);
设置超时（（）=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
if（此.state.isLoading）{
Api.post（“反馈/添加”{
id:this.props.id，//？？？？？？？？？
description:this.state.description
})
。然后（响应=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
if（此.state.isLoading）{
response.status==201/？？？？？？？？？？？？？
？这个。显示反馈（）
：this.showFeedbackNotSent（）；
}
})
.catch（错误=>{
//eslint禁用下一行无控制台
console.log（错误）；
})
.然后（（）=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
this.setState（{isLoading:false，inputDisabled:false}）
});
}
}, 4000);
}
解决这个问题的方法可能有很多。。。我过去所做的就是给每个API调用一个id，然后当它返回时检查以确保这是API调用的当前id。大概是这样的：


sendApi（）{
const currentCallId=uuid（）//或某个随机id生成器
这是我的国家({
孤岛加载：是的，
无效反馈：false，
是的，
inputDisabled:true，
当前呼叫
});
设置超时（（）=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
if（this.state.isLoading&&this.state.showTimer）{
这是我的国家({
showTimer:false
});
}
}, 4000);
设置超时（（）=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
if（此.state.isLoading）{
Api.post（“反馈/添加”{
id:this.props.id，//？？？？？？？？？
description:this.state.description
})
。然后（响应=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
if（此.state.isLoading）{
response.status==201/？？？？？？？？？？？？？
？这个。显示反馈（）
：this.showFeedbackNotSent（）；
}
})
.catch（错误=>{
//eslint禁用下一行无控制台
console.log（错误）；
})
.然后（（）=>{
if（currentCallId！==this.state.currentCallId）返回//忽略
this.setState（{isLoading:false，inputDisabled:false}）
});
}
}, 4000);
}
你的问题是什么？@ZombieChowder当你多次点击按钮时，状态是错误的。我需要他们好好工作。亲自查看视频和代码沙盒，您可以在
feedback send.js
中立即看到正在发生的事情，我看到了这行代码
this.state.I+=1并没有进一步查看。直接状态操作是一种react反模式。@DrewReese抱歉，我是Java开发人员，还没有很好地学习react.js是的，您的问题是什么？@ZombieChowder当您多次单击按钮时，状态工作错误。我需要他们好好工作。亲自查看视频和代码沙盒，您可以在
feedback send.js
中立即看到正在发生的事情，我看到了这行代码
this.state.I+=1并没有进一步查看。直接状态操作是一种react反模式。@DrewReese抱歉，我是Java开发人员，没有很好地学习react.js yetThanks！你帮了我！还有一个问题。如何使我的计数器在变为“0”后不装载？如何使用“发送消息”按钮在一行中显示警报？例如，“反馈必须超过9个符号”，如果用户想发送（它是在代码中）的第一个。。。只需检查一下计时器中的状态。如果是1，你知道下一个是零。所以调用hide（而不是等待它达到零来调用hide）。我不知道你说的在一行中显示警报是什么意思。像f