Question

我正在通过自定义钩子实现列表分页。 handleSetCurrentPage()函数获取正确的number，它使用setCurrentPage(number)。控制台日志setCurrentPage(number)显示了undefined。如果您只在一个文件中执行所有相同的代码（将所有内容放入ListOfItems中），它将正常工作。

挂钩：

export const usePagination = (users = [], defaultPage = 1, amountPerPage = 10) => {
    const [currentPage, setCurrentPage] = useState(defaultPage);
    const [currentUsers, setCurrentUsers] = useState([]);
    const [amountOfPages, setAmountOfPages] = useState(0);

    useEffect(() => {
        updateUsers();
        updateAmountOfPages();
    }, []);

    const updateUsers = () => {
        const indexOfLastPost = currentPage * amountPerPage;
        const indexOfFirstPost = indexOfLastPost - amountPerPage;
        const updatedUsers = users.slice(indexOfFirstPost, indexOfLastPost);
        setCurrentUsers(updatedUsers);
    };

    const updateAmountOfPages = () => {
        const updatedAmount = Math.ceil(users.length / amountPerPage);
        setAmountOfPages(updatedAmount);
    };

    return {
        setCurrentPage,
        amountOfPages,
        currentUsers,
    };
};

项目列表：

export function ListOfItems() {
    const users = useSelector(state => state);
    const { setCurrentPage, currentUsers, amountOfPages } = usePagination(users);
    let {url} = useRouteMatch();

    let items = currentUsers.map(function (value, index) {
        return (
            <form key={index}>
                <div className="input-group">
                    <div className="input-group-prepend">
                        <Link className="input-group-text" to={`${url}/${index}`}>
                            {value.name}, {index}
                        </Link>
                    </div>
                </div>
            </form>
        )
    });

    return (
        <div>
            {/*<form className="card">*/}
            {/*    <Search setSearch={setSearch} />*/}
            {/*</form>*/}
            <div>{items}</div>
            <div>
                <Pagination amountOfPages={amountOfPages} setCurrentPage={setCurrentPage}/>
            </div>
        </div>
    )
}

分页组件：

const Pagination = ({amountOfPages, setCurrentPage}) => {
    const [pageNumbers, setPageNumbers] = useState([]);

    useEffect(() => {
        calculatePageNumbers();
    }, [amountOfPages]);

    function calculatePageNumbers() {
        const updatedPageNumbers = [];
        for (let i = 1; i <= amountOfPages; i++) {
            updatedPageNumbers.push(i);
        }
        setPageNumbers(updatedPageNumbers);
    }

    function handleSetCurrentPage(number) {
        console.log(number);
        return console.log(setCurrentPage(number));
    }

    return (
        <nav>
            <ul className="pagination">
                {pageNumbers.map(number => (
                    <li key={number} className="page-item">
                        <button
                            onClick={() => handleSetCurrentPage(number)}
                            type="button"
                            className="page-link"
                        >
                            {number}
                        </button>
                    </li>
                ))}
            </ul>
        </nav>
    );
};

export default Pagination;

Answer 1

 useEffect(() => {
        updateUsers();
        updateAmountOfPages();
    }, [currentPage]);

如何将功能传递给组件？

1 个答案: