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

Question

我有一个按钮，Submit单击时会执行一些调用 API 的操作。单击后，按钮被禁用或基本上按钮的初始状态和操作被更改。我有两个或多个浏览器选项卡，它们显示相同的屏幕Submit。如果在任一选项卡中Submit执行该操作，其他选项卡应显示更新的版本。其他选项卡应显示禁用版本，并且不应显示初始状态。我该如何实现这一目标？我正在使用 React、JS

Answer 1

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

• 我会推荐一些缓存，例如node-cache。节点缓存会存在可扩展性问题，因此最好使用redis。（逻辑应该是smt。例如：如果表单已使用user_id, 或 withform_id提交，您可以为其创建一个缓存，如果继续，则将其存储在数据库中，其他情况会引发错误。在其他浏览器上submit如果既不unique_id在缓存中也不在 中，则必须在之前进行验证db。如果存在，则可能会在 nr.2 浏览器中引发错误。

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

Answer 2

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

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

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

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

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

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

Answer 3

你可以在客户端完成

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);

    };

  }, []);

 .

 .

 .

};

Answer 4

限制是它不能在不同的浏览器/机器上运行。