Javascript 仅在手动刷新后显示的页面（React）

我刚刚开始将一些类组件更新为功能组件，但现在当导航到其他页面（使用）时，页面将仅在初始刷新后显示

下面是一个例子 这是一个我已更新为使用useState（）钩子的组件

函数管理工作站（{initialCount}）{
const[WSAHeaders，setWSAHeaders]=useState（[{}]）；
const[currentPage，setPage]=useState（1）；
const[WSAPerPage，setWSA]=useState（10）；
常量[PageNumber，createPageNumber]=useState（[]）；
常量[loadingToken，setLoadingToken]=useState（null）；
const indexOfLastTodo=currentPage*WSAPerPage；
const indexOfFirstTodo=indexOfLastTodo-WSAPerPage；
const currentTodos=WSAHeaders.slice（indexOfFirstTodo，indexOfLastTodo）；
//常量页码=[]；
useffect（异步（）=>{
setLoadingToken（真）；
let recordset=wait fetch（`/admin completed workstations`）；
让results=await recordset.json（）；
setWSAHeaders（results.recordset）；
var pNumbers=[]；
为了(
设i=1；
i 10
setWSA（20）}>20
setWSA（40）}>40
setWSA（100）}>100
{" "}
//这里。下拉列表中的这个按钮将我带到正确的页面，但只需要刷新，否则将无法加载。
{" "}
进行中
{" "}

{currentTodos.map（编号=>(

{" "}
//映射子组件

))}
{" "}
当前页：{currentPage}


{pageNumbers.map（number=>(
{number}
))}


);
}else if（加载OK）{
返回(

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

加载
);
}
}

然后我有一个子组件（在.map中）称为问题。这仍然是一个类组件。这会是问题吗

class Questions extends React.Component {
  constructor(props) {
    super(props);

    console.log(props);
    this.state = {
      ...props,
      questionsAccepted: [],
      questionsAcceptedCounter: "",
      selectedSet: [],
      ViewActivityToken: false,
      noteToBeAdded: "",
      notesFromDB: [],
      addNoteToken: false,
      answeredQuestions: []
    };
  }

  render() {
    if (!this.state.ViewActivity) {
      if (!this.state.viewDetails && !this.state.ViewActivityToken) {
        console.log(moment.locale());
        return (
          <div>
            <ModalCompletedQuestions
              RUId={this.props.RUId}
              workStation={this.props.workStation}
              WSAId={this.props.WSAId}
            />
// This Link is a link to another page but this page also needs a refresh before it is visible. 
            <Link
              to={{
                pathname: "/admin-view-full-user-wsa-responses",
                state: {
                  WSAId: this.props.WSAId
                }
              }}
            >
              <button style={{ float: "right" }} className="btn btn-primary">
                View Full Details
              </button>
            </Link>

            <br />

            <li>
              <b>User Id: </b>
              {this.props.RUId}
            </li>
            <li>
              <b>Workstation: </b>
              {this.props.workStation}
            </li>
            <li>
              <b>Date: </b>

              {moment(this.props.date).format("L")}
            </li>
            <li>
              <b>Complete Token: </b>
              {this.props.completeToken}
            </li>
          </div>
        );
      } else if (this.state.viewDetails && !this.state.ViewActivityToken) {
        return (
          <div>
            <button
              style={{ float: "right" }}
              onClick={e =>
                this.setState({
                  ViewActivity: false,
                  viewDetails: false,
                  ViewActivityToken: false,
                  addNoteToken: false
                })
              }
              className="btn btn-secondary"
            >
              Revert
            </button>
            <br />
            <br />

            {this.state.selectedSet &&
              this.state.selectedSet.map((item, index) => {
                return (
                  <div>
                    <li>
                      {" "}
                      <b>{item.QuestionWhenAnswered}</b>{" "}
                    </li>
                    <li>{item.QuestionResponse}</li>
                    <li>{item.Accepted}</li>
                  </div>
                );
              })}
          </div>
        );
      }
    } else if (this.state.ViewActivity && !this.state.addNoteToken) {
      return (
        <>
          <button
            style={{ float: "right" }}
            onClick={e =>
              this.setState({
                ViewActivity: false,
                viewDetails: false,
                ViewActivityToken: false,
                addNoteToken: false
              })
            }
            className="btn btn-secondary"
          >
            Revert
          </button>
          <br />
          <li>
            <b>User Id: </b>
            {this.props.RUId}
          </li>
          <li>
            <b>Workstation: </b>
            {this.props.workStation}
          </li>
          <li>
            <b>Date: </b>
            {moment(this.props.date).format("DD/MM/YYYY")}
          </li>
          <li>
            <b>Complete Token: </b>
            {this.props.completeToken}
          </li>

          {this.state.notesFromDB &&
            this.state.notesFromDB.map((item, index) => {
              return (
                <div
                  style={{
                    backgroundColor: "white",
                    border: "inset",
                    borderWidth: "0.2px"
                  }}
                >
                  <div style={{ float: "right" }}>
                    {moment(item.CreationTime).format("HH:MM  DD/MM/YYYY ")}
                  </div>
                  <div>
                    <b>{`${item.UserStatus} `}</b>
                  </div>

                  <div style={{ textAlign: "left" }}>{item.Notes}</div>
                </div>
              );
            })}

          <br />
          <button
            onClick={this.AddNoteBtn}
            className="btn btn-primary"
            style={{ width: "100%" }}
          >
            Add Note
          </button>
        </>
      );
    }
  }
}

类问题扩展了React.Component{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
此.state={
…道具，
接受的问题：[]，
问题接受计数器：“，
selectedSet:[]，
ViewActivityToken:false，
注：“，
notesFromDB:[]，
addNoteToken:false，
回答问题：[]
};
}
render（）{
如果（！this.state.ViewActivity）{
如果（！this.state.viewDetails&&！this.state.ViewActivityToken）{
console.log（矩.locale（））；
返回(
//此链接是指向另一页的链接，但此页在可见之前也需要刷新。
查看全部详细信息



用户Id:
{this.props.RUId}


工作站：
{this.props.workStation}


日期：
{moment（this.props.date）.format（“L”）}


完整令牌：
{this.props.completeToken}

);
}else if（this.state.viewDetails&！this.state.ViewActivityToken）{
返回(
这是我的国家({
ViewActivity:false，
viewDetails:false，
ViewActivityToken:false，
addNoteToken:false
})
}
className=“btn btn次要”
>
还原




{this.state.selectedSet&&
this.state.selectedSet.map（（项目，索引）=>{
返回(

{" "}
{item.QuestionWhenAnswered}{”“}

{item.QuestionResponse}
{item.Accepted}
);
})}
);
}
}else if（this.state.ViewActivity&！this.state.addNoteToken）{
返回(
这是我的国家({
ViewActivity:false，
viewDetails:false，
ViewActivityToken:false，
addNoteToken:false
})
}
className=“btn btn次要”
>
还原



用户Id:
{this.props.RUId}


工作站：
{this.props.workStation}


日期：
{矩（this.props.date）.format（“DD/MM/YYYY”）}


完整令牌：
{this.props.completeToken}

{this.state.notesFromDB&&
this.state.notesFromDB.map（（项，索引）=>{
返回(
{时刻（item.CreationTime）.format（“HH:MM-DD/MM/yyyyy”）}
{`${item.UserStatus}`}
{item.Notes}
);
})}


添加注释
);
}
}
}

为什么这些页面不能自动加载，为什么它们需要

class Questions extends React.Component {
  constructor(props) {
    super(props);

    console.log(props);
    this.state = {
      ...props,
      questionsAccepted: [],
      questionsAcceptedCounter: "",
      selectedSet: [],
      ViewActivityToken: false,
      noteToBeAdded: "",
      notesFromDB: [],
      addNoteToken: false,
      answeredQuestions: []
    };
  }

  render() {
    if (!this.state.ViewActivity) {
      if (!this.state.viewDetails && !this.state.ViewActivityToken) {
        console.log(moment.locale());
        return (
          <div>
            <ModalCompletedQuestions
              RUId={this.props.RUId}
              workStation={this.props.workStation}
              WSAId={this.props.WSAId}
            />
// This Link is a link to another page but this page also needs a refresh before it is visible. 
            <Link
              to={{
                pathname: "/admin-view-full-user-wsa-responses",
                state: {
                  WSAId: this.props.WSAId
                }
              }}
            >
              <button style={{ float: "right" }} className="btn btn-primary">
                View Full Details
              </button>
            </Link>

            <br />

            <li>
              <b>User Id: </b>
              {this.props.RUId}
            </li>
            <li>
              <b>Workstation: </b>
              {this.props.workStation}
            </li>
            <li>
              <b>Date: </b>

              {moment(this.props.date).format("L")}
            </li>
            <li>
              <b>Complete Token: </b>
              {this.props.completeToken}
            </li>
          </div>
        );
      } else if (this.state.viewDetails && !this.state.ViewActivityToken) {
        return (
          <div>
            <button
              style={{ float: "right" }}
              onClick={e =>
                this.setState({
                  ViewActivity: false,
                  viewDetails: false,
                  ViewActivityToken: false,
                  addNoteToken: false
                })
              }
              className="btn btn-secondary"
            >
              Revert
            </button>
            <br />
            <br />

            {this.state.selectedSet &&
              this.state.selectedSet.map((item, index) => {
                return (
                  <div>
                    <li>
                      {" "}
                      <b>{item.QuestionWhenAnswered}</b>{" "}
                    </li>
                    <li>{item.QuestionResponse}</li>
                    <li>{item.Accepted}</li>
                  </div>
                );
              })}
          </div>
        );
      }
    } else if (this.state.ViewActivity && !this.state.addNoteToken) {
      return (
        <>
          <button
            style={{ float: "right" }}
            onClick={e =>
              this.setState({
                ViewActivity: false,
                viewDetails: false,
                ViewActivityToken: false,
                addNoteToken: false
              })
            }
            className="btn btn-secondary"
          >
            Revert
          </button>
          <br />
          <li>
            <b>User Id: </b>
            {this.props.RUId}
          </li>
          <li>
            <b>Workstation: </b>
            {this.props.workStation}
          </li>
          <li>
            <b>Date: </b>
            {moment(this.props.date).format("DD/MM/YYYY")}
          </li>
          <li>
            <b>Complete Token: </b>
            {this.props.completeToken}
          </li>

          {this.state.notesFromDB &&
            this.state.notesFromDB.map((item, index) => {
              return (
                <div
                  style={{
                    backgroundColor: "white",
                    border: "inset",
                    borderWidth: "0.2px"
                  }}
                >
                  <div style={{ float: "right" }}>
                    {moment(item.CreationTime).format("HH:MM  DD/MM/YYYY ")}
                  </div>
                  <div>
                    <b>{`${item.UserStatus} `}</b>
                  </div>

                  <div style={{ textAlign: "left" }}>{item.Notes}</div>
                </div>
              );
            })}

          <br />
          <button
            onClick={this.AddNoteBtn}
            className="btn btn-primary"
            style={{ width: "100%" }}
          >
            Add Note
          </button>
        </>
      );
    }
  }
}