如何使语义分页正常工作

Question

我在尝试使用分页，搜索/过滤器以使用reactJS进行工作时遇到了非常困难的时间。最终，我发现了这些名为语义界面的库，特别适合初学者。我使用了这些库并尝试在我的应用程序中实现，但是我无法使导航正常工作。需要您的帮助

//我的代码和codesandbox

export class Employee extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 2,
      itemsPerPage: 5
    };
    this.items = createItems(100);
  }

  setPageNum = (event, { activePage }) => {
    this.setState({ page: activePage });
  };

  render() {
    const itemsPerPage = 5;
    const { page } = this.state;
    const totalPages = this.items.length / itemsPerPage;
    const items = this.items.slice(
      (page - 1) * itemsPerPage,
      (page - 1) * itemsPerPage + itemsPerPage
    );
    console.log(items);
    return (
      <div className="App">
        <List divided>
          {cardData.data.Table.map(items => (
            <List.Item key={items}>
              <div className="col-sm-3">
                <div className="card our-team" id="employeeInfo">
                  <div className="card-body">
                    <img
                      className="pic"
                      src={`data:image/jpeg;base64,${items.employee_photo}`}
                      onerror="this.style.display='none'"
                    />

                    <h3 className="title">
                      {items.first_name}
                      {items.id}
                    </h3>


                    <Link
                      to={{ pathname: `/cards/${items.id}`, state: items }}
                      className={`card-wrapper restore-${items.id}`}
                    >
                    View Detail
                    </Link>
                  </div>
                </div>
              </div>
            </List.Item>
          ))}
        </List>
        <Pagination
          activePage={page}
          totalPages={totalPages}
          siblingRange={1}
          onPageChange={this.setPageNum}
        />
      </div>
    );
  }
}