时间戳

首页 > 解决方案 > 如何通过单击带有钩子的按钮添加功能以将 api 结果的第 1 页更改为第 2 页等等？

reactjs - 如何通过单击带有钩子的按钮添加功能以将 api 结果的第 1 页更改为第 2 页等等？

问题描述

我想更改 API 返回的页面数。所以我正在使用 API 来获取电影，并且我正在使用 react hooks 来做到这一点。我使用 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>
        );
    }
}

我只知道如何使它在经典的类方法中工作。所以更清楚一点，我基本上想要的是把这个例子转换成钩子。

标签： reactjsreact-hooks

解决方案

对于您想要做的功能，您需要了解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...
    )
}

推荐阅读