在自定义钩子中设置多个状态

Question

我很想制作一个 React 自定义挂钩，它接收 url 作为参数以使用 axios 检索数据。我可以用这个检索我需要的数据：

import axios from 'axios';
import { useEffect, useState } from 'react';

//Takes a url parameter
const useList = (url) => {

    const [data, setData] = useState( [] );
    
    //Gets data from url parameter passed in and sets the data in State.
    useEffect(() => {
        axios.get(url).then(data => {
            setData(data.data.content);
            console.log(data);
            
        })
    }, [url]);

    return {data};
}

export default useList;

我想添加另一个状态：

const [pageNumber, setPageNumber] = useState(0);

然后在同一个 useEffect 挂钩中更新该状态，因为我从 URL 检索到的响应具有显示总页数的分页数据。

我像这样将它添加到 useEffect 挂钩中：

useEffect(() => {
        axios.get(url).then(data => {
            setData(data.data.content);
            setPageNumber(pageNumber.data.totalPages);
        })
    }, [url]);

并得到错误：

如何在一个 useEffect 挂钩中更新多个状态？（React 的新手）

Answer 1

pageNumber 是用数字初始化的，因此您不能 pageNumber.data，您应该执行以下操作：

useEffect(() => {
        axios.get(url).then(data => {
            setData(data.data.content);
            setPageNumber(data.totalPages);
        })
    }, [url]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

根据 api 设计其 setPageNumber(data.totalPages) 或 setPageNumber(data.data.totalPages)

在自定义钩子中设置多个状态

Setting multiple states in custom hook

pagination

web

reactjs

axios

react-hooks