Je suis nouveau pour réagir. Quelqu'un pourrait-il m'aider à savoir comment un appel d'API peut être fait de manière répétitive tous les 15 minutes et les données sont rendues sur l'application? Veuillez trouver le code ci-dessous. Je pense que l'utilisation de seinterval / Settimeout pourrait être une option. Mais, lequel est le meilleur et s'il vous plaît aidez-moi pour mon code ci-dessous. Merci d'avance!
import React from 'react';
import axios from 'axios';
export default class UserList extends React.Component {
state = {
users: []
};
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const users = res.data;
this.setState({users});
})
}
render() {
return (
<ul>
{this.state.users.map(user => <li>{user.name}</li>)}
</ul>
)
}
}
5 Réponses :
Les deux devraient fonctionner mais utiliser seinterval sera une option plus facile.
Essayez d'utiliser setInterval () Code> Fonction - componentDidMount() {
setInterval(() => {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const users = res.data;
this.setState({users});
});
}, (15 * 1000 * 60));
}
Essayez ceci. Utilisez seinterval code> et stockez l'intervalide afin que vous puissiez nettoyer lorsque le composant démonte. import React from 'react';
import axios from 'axios';
export default class UserList extends React.Component {
state = {
users: [],
};
componentDidMount() {
// Keep the interval id
this.intervalId = setInterval(this.getData, 900000);
}
componentWillUnmount() {
// use intervalId to clear the interval onUnmount
clearInterval(this.intervalId);
}
getData() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const users = res.data;
this.setState({ users });
})
.catch(error => console.log(error))
}
render() {
return (
<ul>
{this.state.users.map(user => <li>{user.name}</li>)}
</ul>
)
}
}
Vous pouvez aller de cette façon p> settimeout () code> déclenche une seule fois, alors que pour une tâche répétitive seinterval () code> est l'option. render() {
return (
<ul>
{this.state.users.map((user, index)
=> <li key={index}>{user.name}</li>)}
</ul>
)
}
Vous pouvez utiliser 1 d'entre eux et cela devrait fonctionner mais simplement curieux, pourquoi vous voulez faire la demande tous les 15 min. Votre exigence est-elle demandée d'afficher des données en direct? Si oui, je suppose que vous pouvez aller avec seinterval code> comme indiqué ci-dessous ou simplement introduire simplement un bouton de rafraîchissement et apporter l'appel lorsque vous avez besoin import React, { Component } from 'react';
import axios from 'axios';
const INTERVAL_DURATION = 15 * 1000 * 60;
export default class UserList extends Component {
state = {
users: [],
};
componentDidMount() {
this._fetchUserInterval = setInterval(this._fetchUsers, INTERVAL_DURATION);
}
componentWillUmount() {
clearInterval(this._fetchUserInterval);
}
_fetchUsers = () => {
axios.get(`https://jsonplaceholder.typicode.com/users`).then(res => {
this.setState({ users: res.data });
});
};
render() {
const { users } = this.state;
return (
<ul>
{users.map((user, index) => (
<li key={index}>{user.name}</li>
))}
</ul>
);
}
}
Vous pouvez utiliser 1 d'entre eux et cela devrait fonctionner mais juste curieux, pourquoi vous voulez faire la demande tous les 15 min. Votre exigence est-elle demandée d'afficher des données en direct? Si oui, je suppose que vous pouvez aller avec
seinterval ou simplement introduire un bouton de rafraîchissement et apporter l'appel au besoin.Les deux œuvres mais que vous essayez de courir quelque chose à un intervalle, je dirais aller avec
seinterval . C'est que c'était destiné.