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

Question

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

我正在从 onClick 事件调用事件处理程序。事件处理程序（见下文）调用 this.setState，但单击时出现错误：TypeError: this is undefined

我试过箭头函数和普通函数。普通函数抛出“未定义”错误，箭头函数抛出编译错误：“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 行。

标签： javascriptreactjssetstate

Answer 1

状态必须是函数/类的一部分，阅读主要概念会更容易，然后搜索到解决方案。

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>
    );
  }
}