React：处理多个浏览器，浏览器选项卡以限制重复操作

Question

我有一个按钮 Submit，单击它会执行一些调用 API 的操作。 Post点击，按钮被禁用或者基本上按钮的初始状态和操作被改变。

我有两个或多个浏览器选项卡显示 Submit 的相同屏幕。如果在任何一个选项卡中执行了 Submit 操作，则其他选项卡应显示更新的版本。其他选项卡应显示禁用版本，不应显示初始状态。

如何实现？我正在使用 React、JS

Answer 1

如果您正在寻找仅限客户端的解决方案，这里有一个很棒的 article 关于在浏览器选项卡之间共享状态。限制是它不适用于不同的 browsers/machines.

Answer 2

从 UI/UX 的角度来看，处理此问题的最佳方法是使用验证。如果 User A 单击提交，然后 User B 从不同的浏览器或选项卡单击提交，应该向 User B 显示错误，指示“此操作已经发生”。

话虽如此，您想要实现的目标是可能的。

一种方法是使用 WebSocket。 WebSocket 是客户端和服务器之间的持久连接，允许双向通信。

你的 React 应用程序中带有提交按钮的页面将是某个 websocket 频道的“订阅者”。当第一次点击提交按钮时（无论从哪里点击），消息可以从 WebSocket 服务器“发布”到 ALL 订阅者，无论使用的浏览器或选项卡如何。

基本上，您可以在 React 应用程序中添加一个 onMessage 处理程序，您可以在收到特定消息时禁用提交按钮。

我不知道你在服务器端使用什么技术，但对于 WebSocket 服务器，有很多选择。对于 React 应用程序，react-websocket 可以直接使用。

Answer 3

#1 必须在服务器端限制数据重复。

我会推荐一些像 node-cache. Node-cache will having scalability issues, so better to go with redis 这样的缓存。（逻辑应该是这样的：如果表单提交了user_id，或者form_id，你可以为它创建一个缓存，如果你继续它，将它存储在数据库中，其他情况抛出错误。在其他浏览器上，如果 unique_id 既不在缓存中也不在 db 中，则必须在 submit 之前验证。如果存在，则可以在 db 中抛出错误nr.2 浏览器。

#2 如果你想禁用按钮，你必须使用websockets

Answer 4

你可以在客户端完成

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);
    };
  }, []);
 .
 .
 .
};

React：处理多个浏览器，浏览器选项卡以限制重复操作

React : Handle multiple browser(s), browser tabs to restrict duplicate operations

javascript

browser

reactjs