Ce que j'essaie de résoudre est, passez la page Endpoint-URL: http: // localhost: 8000 / API / blog_list? Page = P> API-Data: P> la valeur code> en tant que paramètre lors de la récupération des données. Et définissez également la valeur de la pagination par défaut code> est sur code> sur "1" code>. class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
response: "",
};
}
componentDidMount() {
this.fetchData();
}
fetchData = async () => {
try {
const response = await fetch(
`http://localhost:8000/api/blog_list?page=${value}`
);
const JsonResponse = await response.json();
this.setState({ response: JsonResponse });
}
catch (error) {
console.log(error);
}
};
render() {
const { response } = this.state;
if (!response) {
return "Loading...";
}
return (
<div>
{response.results.map((response) =>(
<div class="col-md-12">
<h3> {response.title} </h3>
</div>
))}
</div>
);
}
}
export default App;
3 Réponses :
Je ne suis pas sûr de comprendre votre question correctement, mais si vous souhaitez ajouter la valeur de l'état sous forme de paramètre à cette récupération, vous pouvez transmettre la valeur à l'aide de la concaténation de la chaîne:
Const Réponse = Await Fetch (
http: // localhost: 8000 / API / blog_list? Page = $ {valeur} );
http: // localhost: 8000 / API / blog_list? Page = + Ceci.State.Value
Je crois qu'un problème est que vous n'utilisez pas l'état de votre appel de récupération. Cela devrait ressembler à ceci à la place.
this.state = {
value: "1",
response: "",
};
fetchData = async () => {
const { value } = this.state
try {
const response = await fetch(
`http://localhost:8000/api/blog_list?page=${value}`
);
const JsonResponse = await response.json();
this.setState({ response: JsonResponse });
}
catch (error) {
console.log(error);
}
};
"value" is not defined in fetchData