Javascript 由于呈现方法中存在函数，因此在第一次导航时页码并不总是出现

我正在制作一个分页的页面，但目前我正在使用render（）方法呈现这些页面。我知道这并不理想，我几乎可以肯定这就是为什么有时在导航到屏幕时，页码不会出现（它们在刷新页面后出现）

基本上，我只想把这些从渲染方法中去掉，但我现在在渲染方法中进行了分配，所以我被困在如何转换这个问题上

我已经包括了这个代码，如果你能建议如何采取这些了，我将非常感谢

全班

import React from "react";

import { Link } from "react-router-dom";

import { Modal, DropdownButton, Dropdown } from "react-bootstrap";
import ReactDOM from "react-dom";
var goToken = false;
var results = [];
class AdminWorkstations extends React.Component {
  constructor() {
    super();

    this.state = {
      questions: [],
      viewDetails: false,

      currentPage: 1,
      todosPerPage: 5
    };
    this.getQuestionByUniqueDate = this.getQuestionByUniqueDate.bind(this);
    // this.test = this.test.bind(this);
  }
  // sets the questions form sql into state for questions
  handleClick = event => {
    this.setState({
      currentPage: Number(event.target.id)
    });
  };

  handlePageChange(pageNumber) {
    this.setState({ activePage: pageNumber });
  }

  componentDidMount() {
    fetch(`/admin-completed-workstations`)
      .then(recordset => recordset.json())
      .then(results => {
        this.setState({ questions: results.recordset });
        console.log(this.state.questions);

        this.state.questions &&
          this.getQuestionByUniqueDate(this.state.questions);
      });
  }

  getQuestionByUniqueDate(questions) {
    for (var i = 0; i < questions.length; i++) {
      if (
        !results.find(q => q.Date == questions[i].Date) ||
        !results.find(
          q => q.AssignedWorkStation == questions[i].AssignedWorkStation
        )
      ) {
        results.push(questions[i]);
        this.setState({ amountOfWorkstations: results.length });
      }
    }
    return results;
  }

  render() {
    const { currentPage, todosPerPage } = this.state;

    // Logic for displaying current todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = results.slice(indexOfFirstTodo, indexOfLastTodo);

    const pageNumbers = [];
    for (
      let i = 1;
      i <= Math.ceil(this.state.amountOfWorkstations / todosPerPage);
      i++
    ) {
      pageNumbers.push(i);
    }
    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <button
          className="btn btn-primary"
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}
        </button>
      );
    });

    const renderTodos = currentTodos.map(r => {
      return (
        <>
          <div className="jumbotron">
            <Questions
              workStation={r.AssignedWorkStation}
              date={r.Date}
              completeToken={r.CompleteToken}
            >
              {" "}
            </Questions>
          </div>
        </>
      );
    });

    let selectedWorkStation = window.localStorage.getItem("Workstation");

    console.log(this.state.questions);

    if (this.state.questions.length) {
      return (
        <div>
          <h2 style={{ textAlign: "center" }}>
            Completed Workstation Assessments
          </h2>
          <ul>
            <button disabled className="btn btn-secondary">
              Workstation Assessments
            </button>
            <Link to="./admin-center">
              <button className="btn btn-secondary">Edit Questions</button>
            </Link>
            <Link to="./admin-center-view-users">
              <button className="btn btn-secondary">View Users</button>
            </Link>
            <DropdownButton
              style={{ float: "right" }}
              id="dropdown-basic-button"
              title="Completed"
            >
              <Dropdown.Item>
                {" "}
                <Link to="admin-view-workstation-assessments-declined">
                  In Progress
                </Link>
              </Dropdown.Item>
            </DropdownButton>{" "}
          </ul>

          <ul>
            {renderTodos}{" "}
            <div
              style={{ userSelect: "none", cursor: "pointer" }}
              id="page-numbers"
            >
              {renderPageNumbers}
            </div>
          </ul>
        </div>
      );
    } else if (!this.state.questions.length) {
      return (
        <>
          {" "}
          <div>
            <h3 style={{ textAlign: "center" }}></h3>

            <ul>
              <br />
              <br />{" "}
              <div>
                <h6>
                  {" "}
                  <tr>
                    Desk Location Selected :{" "}
                    <u style={{ color: "grey" }}>{selectedWorkStation}</u>
                  </tr>
                </h6>
              </div>
              <div className="jumbotron">
                <li style={{ textAlign: "center" }}>
                  <b>no completed Workstation Self-Assessments</b>{" "}
                </li>
              </div>
            </ul>
          </div>
        </>
      );
    }
  }
}

从“React”导入React；
从“react router dom”导入{Link}；
从“react bootstrap”导入{Modal，DropdownButton，Dropdown}；
从“react dom”导入react dom；
var goToken=false；
var结果=[]；
类AdminReact.Component{
构造函数（）{
超级（）；
此.state={
问题：[]，
viewDetails:false，
当前页面：1，
致院士：5
};
this.getQuestionByUniqueDate=this.getQuestionByUniqueDate.bind（this）；
//this.test=this.test.bind（this）；
}
//将问题从sql设置为问题的状态
handleClick=事件=>{
这是我的国家({
当前页面：编号（event.target.id）
});
};
handlePageChange（页码）{
this.setState（{activePage:pageNumber}）；
}
componentDidMount（）{
获取（`/admin已完成工作站`）
.then（recordset=>recordset.json（））
。然后（结果=>{
this.setState（{questions:results.recordset}）；
console.log（this.state.questions）；
这是我的问题&&
this.getQuestionByUniqueDate（this.state.questions）；
});
}
getQuestionByUniqueDate（问题）{
对于（var i=0；iq.Date==问题[i].Date）||
！results.find(
q=>q.AssignedWorkStation==问题[i]。AssignedWorkStation
)
) {
结果：推送（问题[i]）；
this.setState（{amountOfWorkstations:results.length}）；
}
}
返回结果；
}
render（）{
const{currentPage，todosPerPage}=this.state；
//显示当前TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
const currentTodos=results.slice（indexOfFirstTodo，indexOfLastTodo）；
常量页码=[]；
为了(
设i=1；
我{
返回(
{number}
);
});
const renderTodos=currentTodos.map（r=>{
返回(
{" "}
);
});
让selectedWorkStation=window.localStorage.getItem（“工作站”）；
console.log（this.state.questions）；
if（this.state.questions.length）{
返回(
完成工作站评估

工作站评估
编辑问题
查看用户
{" "}
进行中
{" "}


{renderTodos}{”“}
{renderPageNumbers}

);
}否则如果（！this.state.questions.length）{
返回(
{" "}




{
{" "}
已选择办公桌位置：{“”}
{selectedWorkStation}

没有完成的工作站自我评估{“”}


);
}
}
}

仅渲染方法

  render() {
    const { currentPage, todosPerPage } = this.state;

    // Logic for displaying current todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = results.slice(indexOfFirstTodo, indexOfLastTodo);

    const pageNumbers = [];
    for (
      let i = 1;
      i <= Math.ceil(this.state.amountOfWorkstations / todosPerPage);
      i++
    ) {
      pageNumbers.push(i);
    }
    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <button
          className="btn btn-primary"
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}
        </button>
      );
    });

    const renderTodos = currentTodos.map(r => {
      return (
        <>
          <div className="jumbotron">
            <Questions
              workStation={r.AssignedWorkStation}
              date={r.Date}
              completeToken={r.CompleteToken}
            >
              {" "}
            </Questions>
          </div>
        </>
      );
    });

    let selectedWorkStation = window.localStorage.getItem("Workstation");

    console.log(this.state.questions);

    if (this.state.questions.length) {
      return (
        <div>
          <h2 style={{ textAlign: "center" }}>
            Completed Workstation Assessments
          </h2>
          <ul>
            <button disabled className="btn btn-secondary">
              Workstation Assessments
            </button>
            <Link to="./admin-center">
              <button className="btn btn-secondary">Edit Questions</button>
            </Link>
            <Link to="./admin-center-view-users">
              <button className="btn btn-secondary">View Users</button>
            </Link>
            <DropdownButton
              style={{ float: "right" }}
              id="dropdown-basic-button"
              title="Completed"
            >
              <Dropdown.Item>
                {" "}
                <Link to="admin-view-workstation-assessments-declined">
                  In Progress
                </Link>
              </Dropdown.Item>
            </DropdownButton>{" "}
          </ul>

          <ul>
            {renderTodos}{" "}
            <div
              style={{ userSelect: "none", cursor: "pointer" }}
              id="page-numbers"
            >
              {renderPageNumbers}
            </div>
          </ul>
        </div>
      );
    } else if (!this.state.questions.length) {
      return (
        <>
          {" "}
          <div>
            <h3 style={{ textAlign: "center" }}></h3>

            <ul>
              <br />
              <br />{" "}
              <div>
                <h6>
                  {" "}
                  <tr>
                    Desk Location Selected :{" "}
                    <u style={{ color: "grey" }}>{selectedWorkStation}</u>
                  </tr>
                </h6>
              </div>
              <div className="jumbotron">
                <li style={{ textAlign: "center" }}>
                  <b>no completed Workstation Self-Assessments</b>{" "}
                </li>
              </div>
            </ul>
          </div>
        </>
      );
    }
  }
}

render（）{
const{currentPage，todosPerPage}=this.state；
//显示当前TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
const currentTodos=results.slice（indexOfFirstTodo，indexOfLastTodo）；
常量页码=[]；
为了(
设i=1；
我{
返回(
{number}
);
});
const renderTodos=currentTodos.map（r=>{
返回(
{" "}
);
});
让selectedWorkStation=window.localStorage.getItem（“工作站”）；
console.log（this.state.questions）；
if（this.state.questions.length）{
返回(
完成工作站评估

工作站评估
编辑问题
查看用户
{" "}
进行中
{" "}


{renderTodos}{”“}
{renderPageNumbers}

);
}否则如果（！this.state.questions.length）{
返回(
{" "}




{
{" "}
已选择办公桌位置：{“”}
{selectedWorkStation}