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

【问题标题】：Using this.setState in an event handler - "this is undefined"在事件处理程序中使用 this.setState - “这是未定义的”
【发布时间】：2019-12-04 00:58:12
【问题描述】：

我正在通过向搜索结果的表格视图添加分页来帮助另一位开发人员。我是 ReactJS 的新手，但对原生 JavaScript 非常熟悉。我从 ReactJS 课程中借用了代码，该课程在家里只使用 Node 作为服务器就可以正常工作。在工作中，我们使用 Node、Next 和 PM2。

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

我试过箭头函数和普通函数。普通函数抛出“未定义”错误，箭头函数抛出编译错误：“eventHandler is not defined”。我在这里搜索并进行了谷歌搜索，但找不到解决此问题的方法。这个组件中没有类，只有一些 const

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

返回搜索结果时，分页显示正确。例如，如果有两页结果，我会得到 1 和 2。但是当我点击任一数字时，我会得到 TypeError: this is undefined on the this.setState 行。

【问题讨论】：

虽然 Dennis offers the right solution 对于这种特定情况，但在深入研究任何框架之前熟悉 how the JavaScript context works 很重要。
在功能组件中使用useState钩子

标签： javascript reactjs setstate

【解决方案1】：

状态必须是函数/类的一部分，reading the main concepts 然后在谷歌上搜索到解决方案会容易得多。

class Pagination extends React.Component {
  state = {
    currentPage: 0
  };

  handlePageChange = page => {
    this.setState({ currentPage: page });
  };

  render() {
    const { itemsCount, pageSize } = this.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={() => this.handlePageChange(page)}>{page}</a>
            </li>
          ))}
        </ul>
      </nav>
    );
  }
}

【讨论】：

使用此解决方案，我收到“props is undefined”错误
已修复，需要this.props
谢谢！我认为做到了。
无需转换为类也可以轻松使用useState钩子
@charlietfl 我知道，但他使用了this.setState({ currentPage: page });，表明他使用了类

【解决方案2】：

添加useState钩子，因为功能组件中没有this.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>
      ))}
  ...
}

【讨论】：