呈现依赖于useState、on条件的功能组件

Question

我是react、hook和功能组件的新手。

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

在Dashboard中，我从allChats获取密钥(topic(，我有一个由Topic中的密钥(activeTopic(值填充的列表。activeTopic与useState挂钩，初始值应该是主题中的第一个键条目。

问题是Dashboard在客户端接收到数据库数据之前渲染，我需要在接收到数据库负载之后渲染Dashboard，或者渲染占位符，直到在上下文提供程序中更新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>
)
}

我显然错过了react、context和hook生命周期的关键概念。我不想破解一个解决方案，我希望能够以正确的方式处理它。我真的很感激你的帮助，谢谢你。

Answer 1

我会在allChats reducer中添加一个isLoaded标志。然后，您可以在面板中使用它来显示<div>loading</div>或上面加载的聊天视图。