TA貢獻1831條經驗 獲得超9個贊
#1 數據重復必須在服務器端受到限制。
我會推薦一些緩存，例如node-cache。節點緩存會存在可擴展性問題，因此最好使用redis。（邏輯應該是smt。例如：如果表單已使用user_id, 或 withform_id提交，您可以為其創建一個緩存，如果繼續，則將其存儲在數據庫中，其他情況會引發錯誤。在其他瀏覽器上submit如果既不unique_id在緩存中也不在 中，則必須在之前進行驗證db。如果存在，則可能會在 nr.2 瀏覽器中引發錯誤。
#2 如果你想禁用該按鈕，你必須使用websockets
TA貢獻1794條經驗 獲得超8個贊
從 UI/UX 角度來看，處理此問題的最佳方法是使用驗證。如果User A單擊“提交”，然后User B從不同的瀏覽器或選項卡單擊“提交”，則應顯示錯誤以User B指示“此操作已發生”。
話雖如此，您想要實現的目標是可能的。
一種方法是使用 WebSocket。WebSocket 是客戶端和服務器之間的持久連接，允許雙向通信。
React 應用程序中帶有提交按鈕的頁面將是某個 websocket 通道的“訂閱者”。當第一次單擊提交按鈕時（無論從哪里單擊），消息都可以從 WebSocket 服務器“發布”給ALL訂閱者，無論使用什么瀏覽器或選項卡。
onMessage基本上，您可以在 React 應用程序中添加一個處理程序，您可以在收到特定消息時禁用提交按鈕。
我不知道你在服務器端使用什么技術，但是對于 WebSocket 服務器，有很多選擇。對于 React 應用程序，有一個可以直接使用的react-websocket 。
TA貢獻1804條經驗 獲得超2個贊
你可以在客戶端完成
const Form = () => {
const [buttonDisabled, setButtonDisable] = useState(false);
// first tab fire
const onSubmit = () => {
.
.
.
localStorage.setItem("formSubmited", "true");
};
useEffect(() => {
const disableButton = (e) => {
if (e.storageArea.formSubmited) {
setButtonDisable(true);
}
};
// second tab fire
window.addEventListener("storage", disableButton);
return () => {
window.removeEventListener("storage", disableButton);
};
}, []);
.
.
.
};
舉報