我在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时进行处理。并且可以在引用中包含间隔，以便在连接时取消它，因此不需要继续间隔。