javascript - 根据条件呈现依赖useState的功能组件

我是新来的反应，钩子和功能组件。

我有一个包装在上下文提供程序Store中的Dashboard组件，当Store加载时，它建立了套接字连接，然后服务器将所需的DB（allChats）数据发送到客户端，该数据由reducer调度加载。

在仪表板中，我从allChats中获取键（主题），我有一个列表，该列表由主题中的键（activeTopic）值填充。
activeTopic与useState挂钩，初始值应该是主题中的第一个关键条目。

问题是仪表板在客户端接收DB数据之前渲染，我需要在接收DB有效负载之后渲染Dashboard或渲染占位符，直到在Context提供程序中更新allChats并触发重新渲染。

我无法有条件地设置useState挂钩，当我尝试有条件地返回渲染内容时，它会引发未定义的错误，因为在触发渲染后便发生了变量分配。

App.js

import Dashboard from "./Dashboard";
import Store from './Store'

function App() {

  return (
    <div className="App">
      <Store>
        <Dashboard />
      </Store>
    </div>
  );
}

export default App;

Store.js

let socket;

function reducer(state, action) {
  switch(action.type) {
    //Replace state with DB payload
    case 'LOAD_MESSAGES':
      return action.payload
    default:
      return state
  }
}

export default function Store(props) {
  //Hook reducer for DB data
  const [allChats, dispatch] = React.useReducer(reducer, {});

  if (!socket) {
    socket = io(':3001');
    //listen for DB data from server upon connection
    socket.on('initialize', function(msg) {
      dispatch({type: 'LOAD_MESSAGES', payload: msg})
    })
  }

  return (
  <CTX.Provider value={{allChats}}>
    {props.children}
  </CTX.Provider>
  )
}

Dashboard.js

export default function Dashboard() {

  const classes = useStyles();
  //Import DB data
  const {allChats} = React.useContext(CTX);
  //Get keys from DB data
  const topics = Object.keys(allChats);
  //Hook activeTopic, initialise with the first key entry
  const [activeTopic, changeActiveTopic] = React.useState(topics[0]);

  return (
    <div>
      <div>
        {
        //populate list with messages from activeTopic key of DB data
        allChats[activeTopic].map((chat, i) => (
            <div key={i}>
                <Chip label={chat.from} className={classes.chip}/>
                <Typography variant='h5' gutterBottom>{chat.msg}</Typography>
            </div>))
        }
      </div>
    </div>
  )
}

我显然缺少反应，上下文和挂钩生命周期的关键概念。我不想破解一个我希望能够以正确方式处理它的解决方案。
非常感谢您的帮助，谢谢。

最佳答案

我将一个isLoaded标志添加到allChats减速器中。然后，您可以在仪表板中使用它来显示<div>loading</div>或上方的已加载聊天视图。

关于javascript - 根据条件呈现依赖useState的功能组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60471559/