J'ai un react-big-calendar , Je souhaite récupérer les événements de cette semaine depuis le backend et les autres semaines depuis le stockage local.
Mon code est:
componentDidMount() {
fetch("url")
.then(Response => Response.json())
.then(data => {
let evts = data;
for (let i = 0; i < evts.length; i++) {
evts[i].start = moment(evts[i].start).toDate();
evts[i].end = moment(evts[i].end).toDate();
this.state.evt1.push(evts[i])
}
this.setState({
evt1: evts,
prevEvents : evts
})
})
console.log(this.state.evt1)
const cachedHits = JSON.parse(localStorage.getItem('Evènements'))
console.log(cachedHits)
for (let j = 0; j <cachedHits.length; j++) {
cachedHits[j].start = moment(cachedHits[j].start).toDate();
cachedHits[j].end = moment(cachedHits[j].end).toDate();
this.state.evt2.push(cachedHits[j])
}
this.setState( {
evt2: this.state.evt2
})
this.setState({
events: [...this.state.evt1, ...this.state.evt2]
})
console.log(this.state.events)
}
les Les evt1 sont: Les evt2 sont: Mais, sur mon calendrier, seuls les evt2 sont affichés et pas tous les événements (evt1 et evt2). Comment afficher tous les événements sur mon calendrier? événements code> est le tableau fusionné de evt1 (événements du backend) et evt2 (événements du stockage local), lorsque je l'exécute, je reçois sur ma console: p> 
4 Réponses :
Essayez d'utiliser la méthode concat qui fonctionne peut-être.
this.setState({
events: evt1.concat(evt2)
})
C'est toujours le même problème, seuls evt2 sont affichés
@ burak-gavas est probablement la voie à suivre
Étant donné que vous effectuez un appel HTTP vers votre serveur, la récupération des données prend un certain temps. Au lieu de définir directement l'état des événements, vous devez attendre la réponse de votre appel HTTP. Votre code devrait être comme ceci:
componentDidMount() {
fetch("url")
.then(Response => Response.json())
.then(data => {
let evts = data;
for (let i = 0; i < evts.length; i++) {
evts[i].start = moment(evts[i].start).toDate();
evts[i].end = moment(evts[i].end).toDate();
this.state.evt1.push(evts[i])
}
this.setState({
evt1: evts,
prevEvents: evts
})
})
.then(() => {
console.log(this.state.evt1)
const cachedHits = JSON.parse(localStorage.getItem('Evènements'))
console.log(cachedHits)
for (let j = 0; j < cachedHits.length; j++) {
cachedHits[j].start = moment(cachedHits[j].start).toDate();
cachedHits[j].end = moment(cachedHits[j].end).toDate();
this.state.evt2.push(cachedHits[j])
}
this.setState({
evt2: this.state.evt2
})
this.setState({
events: [...this.state.evt1, ...this.state.evt2]
})
console.log(this.state.events)
});
}
Je vous recommande également d'avoir un bloc catch dans votre chaîne de promesse pour gérer les erreurs.
Vous pouvez utiliser l'opérateur de propagation pour fusionner deux tableaux.
var a = [{fname : 'foo'}]
var b = [{lname : 'bar'}]
var c = [...a, ...b] // output is [{fname : 'foo'},{lname : 'bar'}]
frustré pendant un certain temps, votre réponse m'a fait plaisir !! toujours confus sur la meilleure pratique de définir un état, un tableau d'objets ou un objet d'objet :(
Sur var b si j'ajoute simplement ce var b = [{fname: 'other'}] , notez que j'ai utilisé la même clé. Maintenant, il ne fait que fusionner à nouveau avec la même clé. Donc, la sortie est comme: // [{fname: 'foo'}, {fname: 'other'}] . Je ne sais pas comment mettre à jour la valeur uniquement.
Ajoutez state.evt1 sur evts, puis parcourez les données que vous obtenez de fetch, apportez des modifications à l'élément actuel à l'intérieur de la boucle for, poussez l'élément vers evts puis ajoutez cela evts à l'état
let evts = this.state.evt1;
for (let i = 0; i < data.length; i++) {
data[i].start = moment(data[i].start).toDate();
data[i].end = moment(data[i].end).toDate();
evts.push(data[i])
}
this.setState({
evt1: evts
})