如何仅在挂载时调用 api 并单击 Fetch Next User 按钮

Posted 2023-03-27

【中文标题】如何仅在挂载时调用 api 并单击 Fetch Next User 按钮

【英文标题】：How to call api only on mount and click of Fetch Next User button

【发布时间】：2021-09-23 07:31:33

【问题描述】：

我有以下代码

import React, useState, useEffect, useCallback from 'react';
import axios from 'axios';

const Users = () => 
    const [users, setUsers] = useState([]);
    const [nextPageNumber, setNextPageNumber] = useState(1);

const fetchUsers = useCallback(() => 
    axios.get(`https://randomuser.me/api?page=$nextPageNumber`).then(response => 
        const updatedUsers = [...users, ...response.data.results];
        setUsers(updatedUsers);
        setNextPageNumber(response.data.info.page + 1);
    ).catch(error => 
        console.log(error)
    )
, [nextPageNumber, users])

useEffect(() => 
    fetchUsers();
, [fetchUsers]);

const fetchNextUser = () => 
    fetchUsers();


if(users.length === 0)
    return <div>No Users available</div>


return(
    <div>
        <button onClick=fetchNextUser>Fetch Next user</button>
        users.map(user => (
            <div key=user.id>
                <div>Name: user.name.title user.name.first user.name.last</div>
                <div>
                    <img src=user.picture.large />
                </div>
            </div>
        ))
    </div>
)


export default Users;

这是重复调用 api。由于 eslint 错误，我在 useEffect 和 useCallback 挂钩中使用了 fetchUsers 依赖项。我只想在第一次挂载时调用 api，然后单击“获取下一个用户”按钮而没有任何 eslint 错误。

有什么方法可以实现吗？

【问题讨论】：

好吧，users 在 fetchUsers() 的依赖项数组中有 users，因此每次调用它时它都会不断变化，导致 useEffect() 再次调用它......因此无限循环。

【参考方案1】：

尝试以下更改，它不会给你 eslint 错误消息。

从'react'导入反应，useState，useEffect，useRef，useCallback； 从'axios'导入axios；

const Users = () => 
    const [users, setUsers] = useState([]);
    const nextPageRef = useRef(1)

    const fetchUsers = useCallback(() => 
        axios.get(`https://randomuser.me/api?page=$nextPageRef.current`).then(response => 
            const updatedUsers = [...response.data.results];
            setUsers(prevUsers => [...prevUsers, ...updatedUsers]);
            nextPageRef.current = response.data.info.page + 1
        ).catch(error => 
            console.log(error)
        )
    , [])

    useEffect(() => 
        fetchUsers();
    , [fetchUsers]);

【参考方案2】：

你可以简单地使用

useEffect(() => 
    fetchUsers();
, []);

这将只调用一次fetchUsers 函数。

当按下按钮时，再次调用fetchUsers()函数