आपका कंटेनर डेटा की सदस्यता लेता है और सदस्यता के 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>
);
}
}
या घटकों का कोई अन्य संयोजन जो लोडिंग स्थिति पर निर्भर करता है।
बीटीडब्ल्यू, tasks
प्रोप एक सरणी है, इसलिए tasks.length
. का उपयोग करना Object.keys
. के बजाय बेहतर होने की संभावना है।