react umi项目，请问再同一项目中，在A页面有个列表，点击新建后跳转到B页面，在B页面操作之后，点击保存，如何让A页面中的列表刷新，有没有好的方式？

Question

ps：同一项目，两个不同的浏览器tab页面

Answer 1

没试过，等我周六试试再告诉你

import { useEffect, useState } from 'react';

const channelId = 'notifications-channel';

/** 发送通知 */
export const onSendNav = (updateStr: string) => {
  const channel = new BroadcastChannel(channelId);
  channel.postMessage(updateStr);
};

/**
 * 解决：浏览器两个 tab 之间 的实时通讯更新数据问题
 * */
const useTabCommunication = () => {
  const [channelMessage, setChannelMessage] = useState('');

  useEffect(() => {
    const channel = new BroadcastChannel(channelId);
    const messageHandler = (event: MessageEvent) => {
      setChannelMessage(event.data);
    };
    channel.addEventListener('message', messageHandler);
    return () => {
      channel.removeEventListener('message', messageHandler);
      channel.close();
    };
  }, []);

  return {
    onSendNav,
    channelMessage,
  };
};

export default useTabCommunication;

Answer 2

没有。我们一般不考虑这种情况。你都打开2个不同浏览器器的tab页面了。如果你非得要这么做，简单的办法你列表页面，写个定时刷新，或者你使用ws。或者你写个当页面激活重新刷新，不一定能达到效果

Answer 3

// 在B页面
localStorage.setItem('data', yourData);

// 在A页面
window.addEventListener('storage', () => {
  // 当localStorage中的数据发生变化时，重新加载列表
  loadData();
});