javascript - 仅在手动刷新后显示页面(React)

Question

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

下面是一个例子这是我已更新为使用 useState() Hook 的组件。

function AdminWorkstationss({ initialCount }) {
  const [WSAHeaders, setWSAHeaders] = useState([{}]);
  const [currentPage, setPage] = useState(1);
  const [WSAPerPage, setWSA] = useState(10);
  const [pageNumbers, createPageNumber] = useState([]);
  const [loadingToken, setLoadingToken] = useState(null);

  const indexOfLastTodo = currentPage * WSAPerPage;
  const indexOfFirstTodo = indexOfLastTodo - WSAPerPage;
  const currentTodos = WSAHeaders.slice(indexOfFirstTodo, indexOfLastTodo);

  // const pageNumbers = [];

  useEffect(async () => {
    setLoadingToken(true);
    let recordset = await fetch(`/admin-completed-workstations`);
    let results = await recordset.json();
    setWSAHeaders(results.recordset);

    var pNumbers = [];
    for (
      let i = 1;
      i <= Math.ceil(results.recordset.length / WSAPerPage);
      i++
    ) {
      // pageNumbers.push(i);
      pNumbers.push(i);
    }
    createPageNumber(pNumbers);

    setLoadingToken(false);
  }, []);

  function handleClick(event) {
    setPage(Number(event.target.id));
  }

  if (!loadingToken) {
    return (
      <>
        <Fade>
          <Slide left>
            <h2 style={{ textAlign: "center" }}>
              Workstation Assessments(<b> Completed</b>)
            </h2>
          </Slide>
        </Fade>
        <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="WSA's Per Page"
          >
            <Dropdown.Item onClick={() => setWSA(10)}>10</Dropdown.Item>
            <Dropdown.Item onClick={() => setWSA(20)}>20</Dropdown.Item>
            <Dropdown.Item onClick={() => setWSA(40)}>40</Dropdown.Item>
            <Dropdown.Item onClick={() => setWSA(100)}>100</Dropdown.Item>
          </DropdownButton>{" "}
          <DropdownButton
            style={{ float: "right" }}
            id="dropdown-basic-button"
            title="Completed"
          >
//HERE. This button in drop down takes me to the correct page but just requires a refresh or it will not load.
            <Dropdown.Item>
              {" "}
              <Link to="admin-view-workstation-assessments-declined">
                In Progress
              </Link>
            </Dropdown.Item>
          </DropdownButton>{" "}
        </ul>
        {currentTodos.map(number => (
          <ul>
            {" "}
            <div className="jumbotron">
//Mapping child component
              <Questions
                workStation={number.AssignedWorkstation}
                date={number.Date}
                completeToken={number.QuestionStatus}
                RUId={number.RUId}
                WSAId={number.WSAId}
              ></Questions>
            </div>
          </ul>
        ))}
        <div style={{ alignContent: "center", width: "10%" }}></div>
        <div style={{ textAlign: "center", alignContent: "center" }}>
          {" "}
          <b> Current Page </b>: {currentPage}
          <br />
          <div>
            {pageNumbers.map(number => (
              <button
                className="btn btn-primary"
                key={number}
                id={number}
                onClick={handleClick}
              >
                {number}
              </button>
            ))}
          </div>
        </div>
        <br />
      </>
    );
  } else if (loadingToken) {
    return (
      <>
        <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>
        <h3 style={{ textAlign: "center" }}>LOADING</h3>
      </>
    );
  }
}

然后，我有一个名为 questions 的子组件(位于 .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>
        </>
      );
    }
  }
}

为什么这些页面没有自动加载以及为什么需要刷新才能加载？有没有可能是因为我将类组件与功能组件一起使用？非常感谢任何帮助。

Answer 1

这是因为我在更改时将 useEffect 设为异步，以便使用效果不使用异步，一切都再次正常工作。