我怎样才能添加一个功能，通过点击一个按钮，用钩子将 api 结果的第 1 页更改为第 2 页等等？

Question

我想更改 API 返回的页码。所以我正在使用 API 来获取电影，并且我正在使用反应钩子来做到这一点。我创建了一个单独的函数来使用 useEffect 从 API 获取，但我不知道如何包含更改从 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>
        );
    }
}

我只知道如何使用类使其在经典方法中发挥作用。所以更清楚地说，我基本上想要的是将这个例子转换为钩子。

Answer 1

首先，您需要将基于 class 的组件转换为无状态组件，然后您需要深入研究 useEffect()，因为正是在这种方法中我们对其产生了副作用学习useState()。它使你获得成功。

Answer 2

对于您想实现的功能，您需要了解 useState 和 useEffect。 useState 非常简单，useEffect 用于组件生命周期方法。

使用挂钩的第一条经验法则是不能将挂钩嵌套到条件中。你必须无条件地爱钩子。

技巧：当你将 class 组件转换为带钩子的功能组件时，首先在你的组件中删除 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...
    )
}

我怎样才能添加一个功能，通过点击一个按钮，用钩子将 api 结果的第 1 页更改为第 2 页等等？

How can I add a function to change the page 1 of the api results to page 2 and so on, by clicking on a button, with hooks?

reactjs

react-hooks