我在React上有一个聊天应用程序,当聊天无法连接时,会打开重新连接模式(ant d)
我希望,当我点击“重新连接"按钮时,倒计时必须工作。但它只在我点击时工作,并且在它停止之后。
我认为React无法渲染,因为它在控制台上重复。
也许这取决于Websocket
。
我的密码
const [countDown, setCountDown] = useState(60);
const [reconnectModal, setReconnectModal] = useState(false);
const reconnectFunction = () => {
connect(); // connect is for Websocket. I can connect the chat with this function.
setInterval(() => {
setCountDown(countDown - 1);
}, 1000);
};
<Modal
visible={reconnectModal}
okText={`Reconnect ${`(${countDown})`}`}
cancelText="Close"
onOk={reconnectFunction}
onCancel={() => setReconnectModal(false)}
>
Connection failed. Please try again
</Modal>
1条答案
按热度按时间xxls0lw81#
这是因为当您设置间隔时,它会将
countDown
转换为实际值(这里默认为60),因此当它更新countDown
的值时,它不会在间隔中更新该值。我想您可以简单地更改为:
因为
v
始终是状态的最后一个值。工作示例here。
不要忘记在计数为0时进行处理。并且可以在引用中包含间隔,以便在连接时取消它,因此不需要继续间隔。