React 自定义挂钩分页 "data" 未定义

Question

我有一个 API 可以在浏览器上显示音乐类别，我正在尝试为分页创建一个自定义挂钩，但我一直收到此错误，对象不可迭代。我是自定义挂钩的新手，真的需要一些帮助。任何人都可以阐明如何解决这个问题吗？

自定义挂钩

`import React, {useState} from 'react';
import getToken from '../api/getToken';

const usePagination = (initialState) => {
    const {categoriesPerPage, data, startFrom} = initialState;
    const perPage = categoriesPerPage ? categoriesPerPage : 5;
    const pages = Math.ceil(data.length / perPage);
    const pagination = [];
    const [currentPage, setCurrentPage] = useState(startFrom <= pages ? startFrom : 1);
    const [slicedData, setSlicedData] = useState([...data].slice((currentPage -1) * perPage, currentPage * perPage));

    let ellipsisLeft = false;
    let ellipsisRight = false;
    for(let i = 1; i <= pages; i++) {
        if(i === currentPage) {
            pagination.push(
                {id: i, current: true, ellipsis: false}
            );
        } else {
            if(i > pages - 1 || i === currentPage -1 || i === currentPage + 1){
                pagination.push(
                    {id: i, current: false, ellipsis: false}
                );
            } else if(i > 1 && i < currentPage && !ellipsisLeft) {
                pagination.push(
                    {id: i, current: false, ellipsis: true}
                );
                ellipsisLeft = true;
            }else if (i < pages && i > currentPage && !ellipsisRight) {
                pagination.push(
                    {id: i, current: false, ellipsis: true}
                );
                ellipsisRight = true;
            }
        }
    }
    const changePage = (page, e) => {
        e.preventDefault(); 
        if(page !== currentPage) {
            setCurrentPage(page);
            setSlicedData([...data].slice((page - 1) * perPage, page * perPage))
        }
    }
    const goToPrevPage = (e) => {
        e.preventDefault();
        setCurrentPage(prevVal => prevVal - 1 === 0 ? prevVal : prevVal - 1);
        if (currentPage !== 1) {
            setSlicedData([...data].slice((currentPage - 2) * perPage, (currentPage - 1) * perPage));
        }
    }
    const goToNextPage = (e) => {
        e.preventDefault();
        setCurrentPage(prevVal => prevVal === pages ? prevVal : prevVal + 1);
        if (currentPage !== pages) {
            setSlicedData([...data].slice(currentPage * perPage, (currentPage + 1) * perPage));
        }
    }
    return {
        slicedData,
        pagination,
        prevPage: goToPrevPage,
        nextPage: goToNextPage,
        changePage
    }
}

export default usePagination;`

分页组件

`import React, {Fragment} from 'react'

import usePagination from '../customHook/usePagination'

const Pagination = (props) => {
const {categoriesPerPage, data, startFrom } = props;
  const [slicedData, pagination, prevPage, nextPage, changePage] = usePagination({categoriesPerPage, data, startFrom});
  return (
    <Fragment>
        <nav className='pagination'>
                <a href='/#' onClick={props.prev} className='pagination-prev'>Prev</a>
                <a href='/#' onClick={props.next} className='pagination-next'>Next</a>
                <ul className='pagination-list'>
                {pagination.map(page => {
                    if(!page.ellipsis) {
                        return <li key={page.id}>
                            <a 
                            href='#'
                            onClick={(e) => changePage(page.id, e)}
                            >
                                {page.id}
                            </a>
                        </li>
                        
                    }else {
                        return <li key={page.id}>
                            <span className='pagination-ellipsis'>&hellip;</span>
                        </li>
                    }
                })}
                </ul>
            </nav>
    </Fragment>
  )
}

export default Pagination`

app.js

`import Header from './Header';

import { useEffect, useState } from 'react';
import getInitalCategories from '../api/getInitalCategories';
import Pagination from './Pagination';

function App() {
    const [categories, setCategories] = useState([]);
    
    useEffect(() => {
        getInitalCategories()
            .then(data => setCategories(data.items))
            .catch(e => console.log('oh no!', e));
    }, []);
    console.log(categories)
    return (
        <div className="App">
            <Header />
            <section
                style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    alignContent: 'space-between',
                    justifyContent: 'space-between',
                }}
            >
                {categories.map(cat => (
                    <div onClick={() => {}} style={{ cursor: 'pointer' }}>
                        <h2 style={{ textAlign: 'center', fontWeight: 200 }}>{cat.name}</h2>
                        <img
                            src={cat.icons[0].url}
                            alt={cat.name}
                            style={{
                                height: cat.icons[0].height,
                                width: cat.icons[0].width,
                                borderRadius: '10%',
                            }}
                        />
                    </div>
                ))}
            </section>
            <Pagination data={categories} categoriesPerPage={5} startFrom={5}/>
        </div>
    );
}

export default App;`

Answer 1

错误是因为categoriesPerPage, data, startFrom这三个在你的pagination组件中没有定义。但是，您已将这些属性作为 prop 传递给分页组件，但您没有访问它们

只需从 props 中破坏这些属性就可以了。在 Pagination 组件中调用 usePagination() 之前添加以下行。谢谢

const {categroiesPerPage, data, startFrom } = props;

React 自定义挂钩分页 "data" 未定义

React custom hook Pagination "data" is not defined

javascript

reactjs

react-hooks