React多态Web应用程序-强制组件在事件发生时重新渲染

问题描述

我正在使用recat-starter-kit并获得以下代码：

if (duel.players.length === 2) {
      console.log('Start duel,emit event!');
      pubsub.emit('DUEL_ROOM_FULL',{
        duel
      });
    }

我正在通过NodeJS提交事件，并且我想在有关此主题的新事件的情况下更新UI。

我的路线/battleArea/index.js文件：

let duelStart = 'no';
pubsub.on('DUEL_ROOM_FULL',msg => {
  console.log("Should start duel");
  duelStart = 'yes';
});

async function action({ fetch }) {

  const resp = await fetch('/graphql',{
    body: JSON.stringify({
      query: '{duel{id,round_id,status,players{user_id,username,rank}}}',}),});
  const { data } = await resp.json();
  if (!data) throw new Error('Failed to load the battle data.');
  const { duel } = data;
  if (duel && duel.status === 'WAITING') {
    return {
      component: (
        <Layout>
          <div>Duel Start: {duelStart}</div>
          <WaitRoom duel={duel} />
        </Layout>
      ),};
  }

  return {
    title: 'Battle Area',chunks: ['battleArea'],component: (
      <Layout>
        <BattleArea />
      </Layout>
    ),};
}

export default action;

不幸的是，以下代码： <div>Duel Start: {duelStart}</div>打印'no'并停留，尽管我在控制台中看到已收到事件。 我认为发生这种情况的原因是组件在服务器接收到此事件之前已由服务器渲染，因此我想重新渲染该组件，以防万一收到此事件。

是否知道\怎么做？

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）