几秒钟后有条件渲染消失

Question

嗨，我正在制作一个与前端对话的网站前端（反应）（npm express / npm mssql）

我制作了一个页面，在其中使用地图功能来呈现包含问题的单独组件。

我尝试实现一个条件渲染，以便当问题完成设置为true时，它将渲染一个新组件，但是新组件将在大约一秒钟后消失并返回其原始状态。

这两个文件都在同一个文件中，因此在这种情况下只需要导入一组即可。

这是我的显示问题类，使用.map呈现单独的组件。

import React from "react";
import { Link } from "react-router-dom";
import { Modal } from "react-bootstrap";

class DisplayQuestions extends React.Component {
  constructor() {
    super();

    this.state = { questions: [], QuestionsAnswer: [], QuestionsSeverity: [] };
    this.onSubmit = this.handleSubmit.bind(this);
  }
  // sets the questions form sql into state for questions
  getItems() {
    fetch("/user-questions")
      .then(recordset => recordset.json())
      .then(results => {
        this.setState({ questions: results.recordset });
      });
  }
  //when the component mounts make the sql questions the s
  componentDidMount() {
    this.setState({
      questions: this.getItems()
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    const data = {
      QuestionID: this.QuestionID,
      QuestionsAnswer: this.state.QuestionsAnswer,
      QuestionSeverity: this.state.QuestionsSeverity
    };

    try {
      fetch("/Question-Response", {
        method: "POST", // or 'PUT'
        headers: {
          Accept: "application/json, text/plain, */*",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => response.json())
        .then(data => {
          console.log("Success:", data);
        })
        .catch(error => {
          console.error("Error:", error);
        });
    } catch (error) {}
  }
  refresh() {
    window.location.reload();
  }

  render() {
    var self = this;
    console.log(this.state.questions);
    return (
      <div>
        <h3 style={{ textAlign: "center" }}>
          <u>Desk Assessment</u>
        </h3>

        <ul>
          <button
            disabled
            className="btn btn-secondary"
            style={{ float: "left " }}
          >
            Desk Assessment
          </button>




          <Link to="./user-history">
            <button className="btn btn-secondary" style={{ float: "left " }}>
              View History
            </button>
          </Link>
          <br />
          <br />

            {this.state.questions &&
              this.state.questions.map(function(questions, index) {
                return (
                  <div >

                  <ul>
                    <WorkStations questions={questions}></WorkStations>
                  </ul>
                  </div>
                );
              })}

        </ul>
      </div>
    );
  }
}

export default DisplayQuestions;

这是我的问题组件，已呈现

class WorkStations extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = { ...props, show: false, QuestionAnswer: "", QuestionComplete: false };

    this.QuestionDecline = this.QuestionDecline.bind(this);
    this.QuestionOnChange = this.QuestionOnChange.bind(this);
    this.OnCommit = this.OnCommit.bind(this);
  }

  QuestionDecline(e) {
    e.preventDefault();

    if (this.state.ShowInput) {
      this.setState({ ShowInput: false });
      alert(this.state.ShowInput);
    } else if (!this.state.ShowInput) {
      this.setState({ ShowInput: true });
      alert(this.state.ShowInput);
    }



  }

  QuestionOnChange(e) {
    this.setState({ QuestionAnswer: e.target.value });
  }


 //////////////////////////////////////////////////////////// I believe its within here something is off
  OnCommit(e) {
    e.preventDefault();
    alert(this.state.QuestionAnswer);

    var today = new Date(),
      date = `${today.getUTCFullYear()}-${today.getUTCMonth() +
        1}-${today.getUTCDate()} ${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}.${today.getMilliseconds()} `;

    let User =  window.localStorage.getItem("User")


    const data = {
      QuestionId: this.state.questions.QuestionId,
      QuestionAnswer: this.state.QuestionAnswer,
      date : date,
        User
    };

    fetch("/question-response", {
      method: "POST", // or 'PUT'
      headers: {
        Accept: "application/json,",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    }).then(response => {
      console.log("response before it is broken down " + response);

      // return response.json();
    });

      if (this.state.QuestionComplete) {
        this.setState({ QuestionComplete: false });
        alert(this.state.QuestionComplete);
      } else if (!this.state.QuestionComplete) {
        this.setState({ QuestionComplete: true });
        alert(this.state.QuestionComplete);
      }
    window.location.reload();
  }
////////////////////////////////////////////////
  render() {
    if (!this.state.QuestionComplete ){
    if (!this.state.ShowInput && !this.state.QuestionComplete) {
      return (
        <div className="jumbotron">
          <button
            onClick={this.QuestionDecline}
            className="btn btn-danger"
            style={{ float: "right" }}
          >
            Decline
          </button> <button
            onClick={this.deleteQuestion}
            className="btn btn-primary"
            style={{ float: "right" }}
          >
            Accept
          </button>

          <br />
          <li> Question ID: {this.state.questions.QuestionId}</li>
          <li> Question:{this.state.questions.Question}</li>
        </div>
      );
    } else if(this.state.ShowInput && !this.state.QuestionComplete) {
      return (
        <div className = "jumbotron">
          <li>Question Id: {this.state.questions.QuestionId}</li>
          <li>
            <textarea
              placeholder= "How can this be improved ?" 
              style={{ width: "100%" }}
              onChange={this.QuestionOnChange}
            />
          </li>
          <button
            style={{ float: "right", padding: "2px" }}
            className="btn btn-primary"
            onClick={this.OnCommit}
          >
            Submit
          </button>

          <button
            onClick={this.EditQuestion}
            style={{ float: "right", padding: "2px" }}
            className="btn btn-secondary"
          >
            Revert
          </button>
          <br />
        </div>
      );
    }

    }else if (this.state.QuestionComplete) {
        return(<h3> <li>Question Id: {this.state.questions.QuestionId}</li></h3>)

    }


  }
}