任务：我需要根据数据库结果显示组件。问题：它在检查数据库之前呈现组件并显示结果而不从数据库中获取任何信息，并且在从数据库接收到结果后第二次呈现，这会产生闪烁的 UI 问题*
*在我的例子中（...删除...）我展示了它。添加至少一项任务后，刷新页面和“添加任务！” 红色块将在前半秒内可见。
如何解决这个问题？我应该使用“Promise”还是只有在检查数据库后才能显示结果？
Meteor / ReactJS - UI 闪烁问题：在检查数据库之前和之后渲染两次
IT技术
mongodb
reactjs
meteor
2021-05-08 23:18:29
1个回答
您的容器订阅数据并监控订阅的ready状态：
createContainer(() => {
const todosHandle = Meteor.subscribe('tasks');
const loading = !todosHandle.ready();
return {
loading,
tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
};
}, App);
这意味着您的组件将收到一个布尔loading属性，指示数据是否可用。您可以在组件中使用它来在loading加载数据时呈现视图：
class App extends Component {
//...
render() {
const {loading, tasks} = this.props;
if (loading) {
return (
<div className="spinner">
Loading...
</div>
);
}
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
//...
</div>
);
}
}
或任何其他取决于加载状态的组件组合。
顺便说一句，tasksprops是一个数组，所以使用tasks.length而不是Object.keys可能更好。
其它你可能感兴趣的问题