Javascript 在事件处理程序中使用this.setState-“；这是未定义的；

我正在帮助另一个开发人员向搜索结果的表视图添加分页。我不熟悉ReactJS，但非常熟悉香草JavaScript。我从ReactJS课程中借用了代码，该课程在家中只使用节点作为服务器，效果很好。在工作中，我们使用Node、Next和PM2

我正在从onClick事件调用事件处理程序。事件处理程序（见下文）调用this.setState，但单击时，我得到错误： TypeError：这是未定义的

我尝试了一个箭头函数和一个普通函数。normal函数抛出“undefined”错误，arrow函数抛出编译错误：“eventHandler未定义”。我在这里搜索过，在谷歌上搜索过，但我找不到解决这个问题的方法。这个组件中没有类，只有一些常量

function handlePageChange(page){
  this.setState((page)=>({currentPage: page}));
}
const Pagination = (props)=>{
  const {itemsCount, pageSize}=props;
  const pagesCount = Math.ceil(itemsCount / pageSize);
  if (pagesCount===1) return null;
  let active =1;
  const pages = _.range(1,pagesCount+1);
  return (
    <nav>
      <ul className="pagination">
        {pages.map(page=>(
          <li key={page} active={page===active}>
            <a onClick={()=>handlePageChange(page)}>
              {page}
            </a>
          </li>
         ))}
       </ul>
    </nav>
  )
}

Const Demo = (props)=>{
  return (
//  ... div, container, table, then the pagination:
  <Pagination
    itemsCount={props.data.length}
    pageSize={pageSize}
    currentPage={page}
  />
)}
async function getInitialProps(){}
export default Demo

功能手柄页面更改（第页）{
this.setState（（page）=>（{currentPage:page}））；
}
常量分页=（道具）=>{
const{itemscont，pageSize}=props；
const pagescont=Math.ceil（itemscont/pageSize）；
如果（PageScont==1）返回null；
设主动=1；
常量页面=uu.range（1，PageScont+1）；
返回(

{pages.map（页面=>(

handlePageChange（第页）}>
{page}

))}

)
}
常量演示=（道具）=>{
返回(
//…div、container、table，然后是分页：
)}
异步函数getInitialProps（）{}
导出默认演示

---

返回搜索结果时，分页显示正确。例如，如果有两页结果，我得到1和2。但是当我点击任意一个数字时，我会得到TypeError：这在this.setState行中是未定义的。

状态必须是函数/类的一部分，这将比一直搜索到解决方案要容易得多

类分页扩展了React.Component{
状态={
当前页面：0
};
handlePageChange=页面=>{
this.setState（{currentPage:page}）；
};
render（）{
const{itemscont，pageSize}=this.props；
const pagescont=Math.ceil（itemscont/pageSize）；
如果（PageScont==1）返回null；
设主动=1；
常量页面=uu.range（1，PageScont+1）；
返回(

{pages.map（页面=>(

this.handlePageChange（page）}>{page}

))}

);
}
}

状态必须是函数/类的一部分，这将比一直搜索到解决方案要容易得多

类分页扩展了React.Component{
状态={
当前页面：0
};
handlePageChange=页面=>{
this.setState（{currentPage:page}）；
};
render（）{
const{itemscont，pageSize}=this.props；
const pagescont=Math.ceil（itemscont/pageSize）；
如果（PageScont==1）返回null；
设主动=1；
常量页面=uu.range（1，PageScont+1）；
返回(

{pages.map（页面=>(

this.handlePageChange（page）}>{page}

))}

);
}
}

添加

使用状态

钩子，因为功能组件中没有

此.setState

import React, { useState } from 'react';

const Pagination = (props) => {
  const [currPage, setCurrPage] = useState(/* default*/);
  ...

    {pages.map(page => (
        <li key={page} active={page === currPage}>
          <a onClick={() => setCurrPage(page)}>{page}</a>
        </li>
      ))}
  ...
}

import React，{useState}来自“React”；
常量分页=（道具）=>{
const[currPage，setCurrPage]=useState（/*default*/）；
...
{pages.map（页面=>(

setCurrPage（page）}>{page}

))}
...
}

添加

使用状态

钩子，因为功能组件中没有

此.setState

import React, { useState } from 'react';

const Pagination = (props) => {
  const [currPage, setCurrPage] = useState(/* default*/);
  ...

    {pages.map(page => (
        <li key={page} active={page === currPage}>
          <a onClick={() => setCurrPage(page)}>{page}</a>
        </li>
      ))}
  ...
}

import React，{useState}来自“React”；
常量分页=（道具）=>{
const[currPage，setCurrPage]=useState（/*default*/）；
...
{pages.map（页面=>(

setCurrPage（page）}>{page}

))}
...
}

对于这种特定情况，在进入任何框架之前必须熟悉。在功能组件中使用

useState

钩子对于这种特定情况，在进入任何框架之前必须熟悉钩子。在具有此解决方案的功能组件中使用

useState

钩子，我得到一个“道具未定义”的错误修复，需要

这个。道具
谢谢！我想是这样的。可以很容易地使用
useState
hook，而无需转换为class@charlietfl我知道，但他使用了
this.setState（{currentPage:page}）
这表明他使用了Classes。在这个解决方案中，我得到了一个“props is undefined”错误修复，需要
这个。props
谢谢！我想是这样的。可以很容易地使用
useState
hook，而无需转换为class@charlietfl我知道，但他使用了
this.setState（{currentPage:page}）这表明他使用类