Question

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

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

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

问题是仪表板在客户端接收数据库数据之前呈现，我需要在接收数据库有效载荷之后渲染仪表板，或者呈现占位符，直到 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>
  )
}

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

Answer 1

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

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

1 个答案: