Reactjs 条件渲染在几秒钟后消失

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

我制作了一个页面，其中它使用map函数来呈现包含问题的单独组件

我已经尝试实现一个条件渲染，这样当问题完成设置为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;

从“React”导入React；
从“react router dom”导入{Link}；
从“react bootstrap”导入{Modal}；
类DisplayReact.Component{
构造函数（）{
超级（）；
this.state={问题：[]，问题答案：[]，问题真实性：[]；
this.onSubmit=this.handleSubmit.bind（this）；
}
//将问题从sql设置为问题的状态
getItems（）{
获取（“/用户问题”）
.then（recordset=>recordset.json（））
。然后（结果=>{
this.setState（{questions:results.recordset}）；
});
}
//当组件装载时，使sql查询
componentDidMount（）{
这是我的国家({
问题：this.getItems（）
});
}
handleSubmit（e）{
e、 预防默认值（）；
常数数据={
问题ID：这个，问题ID，
提问者回答：这个。州。提问者回答，
问题严重性：this.state.questionsVerity
};
试一试{
获取（“/问题响应”{
方法：“POST”、//或“PUT”
标题：{
接受：“application/json，text/plain，*/*”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（数据）
})
.then（response=>response.json（））
。然后（数据=>{
console.log（“成功：”，数据）；
})
.catch（错误=>{
控制台错误（“错误：”，错误）；
});
}捕获（错误）{}
}
刷新（）{
window.location.reload（）；
}
render（）{
var self=这个；
console.log（this.state.questions）；
返回(
案头评估

案头评估
查看历史




{this.state.problems&&
this.state.questions.map（函数（问题，索引）{
返回(


);
})}

);
}
}
导出默认显示问题；

这是呈现的“我的问题”组件

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>)

    }


  }
}

类。组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
this.state={…props，show:false，QuestionAnswer:，QuestionComplete:false}；
this.questionDecept=this.questionDecept.bind（this）；
this.questionchange=this.questionchange.bind（this）；
this.OnCommit=this.OnCommit.bind（this）；
}
问题（e）{
e、 预防默认值（）；
if（this.state.ShowInput）{
this.setState（{ShowInput:false}）；
警报（this.state.ShowInput）；
}else如果（！this.state.ShowInput）{
this.setState（{ShowInput:true}）；
警报（this.state.ShowInput）；
}
}
问题更改（e）{
this.setState（{问题答案：e.target.value}）；
}
////////////////////////////////////////////////////////////我相信这里面有东西坏了
委员会（e）{
e、 预防默认值（）；
警报（this.state.questionresponse）；
var today=新日期（），
日期=`${today.getUTCFullYear（）}-${today.getUTCMonth（）+
1} -${today.getUTCDate（）}${today.getHours（）}:${today.getMinutes（）}:${today.getSeconds（）}.${today.getmillizes（）}`；
让User=window.localStorage.getItem（“用户”）
常数数据={
QuestionId:this.state.questions.QuestionId，
问答：this.state.questionresponse，
日期:日期:，
使用者
};
获取（“/问题响应”{
方法：“POST”、//或“PUT”
标题：{
接受：“application/json，”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（数据）
})。然后（响应=>{
console.log（“分解前的响应”+响应）；
//返回response.json（）；
});
如果（此.state.QuestionComplete）{
this.setState（{QuestionComplete:false}）；
警报（this.state.QuestionComplete）；
}否则如果（！this.state.QuestionComplete）{
this.setState（{QuestionComplete:true}）；
警报（this.state.QuestionComplete）；
}
window.location.reload（）；
}
////////////////////////////////////////////////
render（）{
如果（！this.state.QuestionComplete）{
如果（！this.state.ShowInput&！this.state.QuestionComplete）{
返回(
减少
接受


问题ID:{this.state.questions.QuestionId}
问题：{这个.州.问题.问题}
);
}else if（this.state.ShowInput&！this.state.QuestionComplete）{
返回(
问题Id:{this.state.questions.QuestionId}


提交
还原


);
}
}else if（this.state.QuestionComplete）{
返回（
问题Id:{this.state.questions.QuestionId}
）
}
}
}

更好地了解正在发生的事情。您的页面是变空白（没有显示？）还是设置状态以显示其他内容？如果它正在设置状态并显示其他内容，它显示的是什么？在最底层