Как я могу добавить функцию для изменения страницы 1 результатов API на страницу 2 и т. д., нажав на кнопку, с крючками?
Я хочу изменить номер страницы, возвращаемой API. Итак, я использую API для получения фильмов, и для этого я использую реагирующие хуки. Я сделал отдельную функцию для получения из API с помощью useEffect, но я не знаю, как включить функциональность для изменения страницы, возвращаемой из API, с помощью реагирующих хуков.
Я понятия не имею, как я могу это сделать.
class ContactList extends React.Component {
state = {
contacts: [],
per: 2,
page: 1,
totalPages: null
}
componentWillMount() {
this.loadContacts()
}
loadContacts = () => {
const {per, page, contacts} = this.state;
const url = `https://student-example-api.herokuapp.com/v1/contacts.json?per=${per}&page=${page}`;
fetch(url)
.then(response => response.json())
.then(json => this.setState({
contacts: [...contacts, ...json.contacts]
}));
}
loadMore = () => {
this.setState((prevState) => ({
page: prevState.page + 1
}), this.loadContacts)
}
render() {
return (
<div>
<ul className = "contacts">
{
this.state.contacts.map(contact => <li key = {contact.id}>
<Contact {...contact} />
</li>)
}
</ul>
<a onClick = {this.loadMore}>Load More</a>
</div>
);
}
}
Я знаю только, как заставить его работать в классическом подходе с классами. Итак, чтобы быть более ясным, я в основном хочу преобразовать этот пример в хуки.
Ответы 2
Во-первых, вам нужно преобразовать ваш компонент на основе классов в компонент без состояния, а затем вам нужно глубоко изучить useEffect(), потому что именно в этом методе мы делаем побочные эффекты, а также для изучения useState(). Делая это, вы добиваетесь успеха.
Для функциональности, которую вы хотите реализовать, вам нужно понимать useState и useEffect. useState очень прост и useEffect предназначен для методов жизненного цикла компонентов.
Первое эмпирическое правило использования хуков: вы не можете вкладывать этот хук в условия. Вы должны безоговорочно любить хуки.
Уловка: когда вы конвертируете компонент класса в функциональный с помощью хуков, сначала избавьтесь от this в своих компонентах.
Если вы хотите получить информацию о своем коде. Вот как это.
import React, { useEffect, useState } from "react";
const ContactList = (props) => {
// see how it declares and set the state
const [contacts, setContacts] = useState([]);
useEffect(() => {
// for all the lifecycle methods, you can use this.
loadContacts();
// return a function for the componentWillUnmount
return;
}, [])
const loadContacts = () => {
const url = `https://student-example-api.herokuapp.com/v1/contacts.json?per=${per}&page=${page}`;
fetch(url)
.then(response => response.json())
.then(json => {
// setting state
setContacts([...contacts, json.contacts]);
});
}
return (
// whatever you want to render...
)
}