Как добавить функцию для изменения страницы 1 результатов API на страницу 2 и т. Д., Нажав кнопку с помощью хуков? - PullRequest
Новая
       10

Как добавить функцию для изменения страницы 1 результатов API на страницу 2 и т. Д., Нажав кнопку с помощью хуков?

0 голосов
/ 07 апреля 2019

Я хочу изменить номер страницы, возвращаемой 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 ]

1 голос
/ 08 апреля 2019

Для функциональности, которую вы хотите сделать, вы должны понимать 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...
    )
}
0 голосов
/ 08 апреля 2019

Во-первых, вам нужно преобразовать компонент на основе классов в компонент без состояния, а после углубленного изучения useEffect(), поскольку именно в этом методе мы проводим побочные эффекты, а также изучаем useState(). Сделав это, вы получите успех.

...