将函数作为参数发送时，“functionName”不是函数

Question

我是 React 和 Typescript 的新手，我有一些包含内容的博客，我正在尝试为其添加分页。

我看了this tutorial 并写了那个组件用于分页：

import React from 'react'



export const Pagination = (totalPagesX:any, paginate :any) => {
    const pageNumbers=[];
    

    const size=Math.ceil(totalPagesX.totalPages);
   
    
for (let index = 1; index <=size; index++) {

    pageNumbers.push(index);
}

    return (
        <nav>
            <ul className='pagination'>
                {pageNumbers.map((number)=>(
                    <li key={number} className='page-item'>
                    <Pagination totalPages={+totalPages} paginate={paginate} />
                            {number}
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    )
}

现在参数 paginate 是我的 App 类中的一个函数：

export class App extends React.PureComponent<{}, AppState> {


    state: AppState = {

        currentPage: 1,
        totalPages:'10',

    }




    async componentDidMount() {
        this.setState({
            totalPages: await api.getTotalPages(),
        });
                }


      paginate=(pageNumber:number)=>{console.log("number",number)};
     

    render() {
        const { currentPage, totalPages } = this.state;
        return (<main>
            <ThemeProvider>
                <Page />

            </ThemeProvider>
            
                <Pagination totalPages={+totalPages} paginate={this.paginate} />
            </footer>
        </main>)
    }}

但每次我尝试转到下一页时都会收到此错误：

> TypeError: paginate is not a function 
19 | <ul className='pagination'>  
> 20 |{pageNumbers.map((number)=>(21 |<li key={number}
> className='page-item'>
> > 22 |<a className='page-link' href='!#' onClick={(number) => paginate(number)}>
>| ^  23 |{number}24 |</a>   25 | </li>

Answer 1

这不是接收道具的正确方式：

export const Pagination = (totalPagesX:any, paginate :any) => {
  return <> ... </>
}

当 props 被传递为：

<Pagination totalPagesX={some_number} paginate={some_variable_or_function} />

正确的做法是：

export const Pagination = (props) => {
  const {totalPagesX, paginate} = props // props destructuring
  return <> ... </>
}

或者

export const Pagination = ({totalPagesX, paginate}) => { // props destructuring
  return <> ... </>
}

要修复与打字稿相关的错误/警告，您可以提供正确的打字或使用any：

例子：

interface IProps {
  totalPagesX: number
  paginate: () => void // function
  // or, the below one, if it accepts some parameters
  paginate: (param1: number, param2: string, param3: number) => void // function
}
export const Pagination = ({totalPagesX, paginate}: IProps) => { // props destructuring
  return <> ... </>
}

Answer 2

所以首先你不能在分页功能组件中使用下面的代码。这在 React 中是不正确的。

<Pagination totalPages={+totalPages} paginate={this.paginate} />

尝试仅将 li 标签用于分页。

import React from 'react';

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className='pagination'>
        {pageNumbers.map(number => (
          <li key={number} className='page-item'>
            <a onClick={() => paginate(number)} href='!#' className='page-link'>
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

同时在您的应用组件中进行以下更改。

export class App extends React.PureComponent<{}, AppState> {


    state: AppState = {

        currentPage: 1,
        totalPages:'10',

    }




    async componentDidMount() {
        this.setState({
            totalPages: await api.getTotalPages(),
        });
                }


     paginate(pageNumber:number) {
       console.log("number",number)
     };
     

    render() {
        const { currentPage, totalPages } = this.state;
        return (<main>
            <ThemeProvider>
                <Page />

            </ThemeProvider>
            
                <Pagination totalPages={+totalPages} paginate={this.paginate} />
            </footer>
        </main>)
    }}

请参阅下面的 stackblitz URL 以获得相同的内容。

React Pagination