Javascript 从映射组件收集所有状态并存储状态
我有一个初始组件,它将第二个组件与有关问题的信息进行映射。我想做的是收集所有这些问题的答案,并将它们保存在同一个位置(状态、数组、对象,我真的不介意如何保存) 然而,当我从映射组件更新状态时,当控制台记录这些结果时,它只显示每个单独的更新状态 如何或在何处存储此映射组件中的问题和答案,以便稍后使用所有答案存储到其他位置 这是我提到的映射组件(由于我正在进行的所有条件渲染,它有点复杂)Javascript 从映射组件收集所有状态并存储状态,javascript,reactjs,Javascript,Reactjs,我有一个初始组件,它将第二个组件与有关问题的信息进行映射。我想做的是收集所有这些问题的答案,并将它们保存在同一个位置(状态、数组、对象,我真的不介意如何保存) 然而,当我从映射组件更新状态时,当控制台记录这些结果时,它只显示每个单独的更新状态 如何或在何处存储此映射组件中的问题和答案,以便稍后使用所有答案存储到其他位置 这是我提到的映射组件(由于我正在进行的所有条件渲染,它有点复杂) 但是,当控制台登录到此组件中的任何位置时,它将只显示最近回答的问题 我用我认为最简单的方法解决了这个问题。 我希
但是,当控制台登录到此组件中的任何位置时,它将只显示最近回答的问题 我用我认为最简单的方法解决了这个问题。 我希望有一个更鼓舞人心的方法来做这件事,但这就是我最终得到的 我所做的只是在我的第一个类的顶部定义一个数组,然后将所有这些结果推到那里
class Questions extends React.Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
...props,
QuestionAnswer: "",
QuestionAccepted: false,
problem: false,
problemDefinition: "",
completedQuestions: [],
soloutionForDeclinedQuestion: ""
};
this.QuestionDecline = this.QuestionDecline.bind(this);
this.QuestionOnChange = this.QuestionOnChange.bind(this);
this.OnCommit = this.OnCommit.bind(this);
this.RevertDeclinedAnswer = this.RevertDeclinedAnswer.bind(this);
this.RevertAcceptedAnswer = this.RevertAcceptedAnswer.bind(this);
this.AdmitProblem = this.AdmitProblem.bind(this);
this.AdmitNotProblem = this.AdmitNotProblem.bind(this);
this.QuestionProblem = this.QuestionProblem.bind(this);
this.SubmitProblemSoloution = this.SubmitProblemSoloution.bind(this);
this.submitDeclinedQuestionSoloution = this.submitDeclinedQuestionSoloution.bind(
this
);
this.AcceptAnswer = this.AcceptAnswer.bind(this);
}
submitDeclinedQuestionSoloution(e) {
e.preventDefault();
let answer = this.state.soloutionForDeclinedQuestion;
let question = this.state.questions.Question;
let state = "Declined With solution";
let newItem = {
answer: answer,
question: question,
state: state
};
this.state.completedQuestions.push(newItem);
console.log(this.state.completedQuestions);
this.setState({
QuestionComplete: true,
QuestionAccepted: false,
problem: true,
questionProblem: true,
problemSubmitted: false,
declineSubmitted: true
});
}
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);
}
}
AdmitProblem(e) {
e.preventDefault();
alert("clicked");
this.setState({
QuestionComplete: true,
QuestionAccepted: true
});
}
AdmitNotProblem(e) {
e.preventDefault();
alert("clicked not a problem");
this.setState({
QuestionComplete: true,
QuestionAccepted: false,
problem: true
});
}
QuestionProblem(e) {
e.preventDefault();
alert("problem clicked");
this.setState({
QuestionAccepted: false,
problem: true,
questionProblem: true,
QuestionComplete: true
});
}
AcceptAnswer(e) {
e.preventDefault();
let answer = "yes";
let question = this.state.questions.Question;
let state = "Accepted";
let newItem = {
answer: answer,
question: question,
state: state
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////Here I am trying to store to the state.
this.setState(state => ({
completedQuestions: state.completedQuestions.concat(newItem)
}));
this.setState({
QuestionAccepted: false,
problem: false,
questionProblem: false,
QuestionComplete: true
});
console.log(this.state.QuestionAndAnswer);
}
RevertAcceptedAnswer(e) {
e.preventDefault();
alert("revert clciked answer declined");
let Email = window.localStorage.getItem("User");
let WorkStation = window.localStorage.getItem("Workstation");
const data = {
QuestionId: this.state.questions.QuestionId,
QuestionAnswer: this.state.QuestionAnswer,
Email,
WorkStation
};
fetch("revert-accepted-question-answer", {
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();
});
this.setState({ ShowInput: false, QuestionComplete: false });
alert("you answer has been deleted from the database");
}
RevertDeclinedAnswer(e) {
e.preventDefault();
alert("revert clciked answer declined");
let Email = window.localStorage.getItem("User");
let WorkStation = window.localStorage.getItem("Workstation");
const data = {
QuestionId: this.state.questions.QuestionId,
QuestionAnswer: this.state.QuestionAnswer,
Email,
WorkStation
};
fetch("revert-declined-question-answer", {
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();
});
this.setState({ ShowInput: false, QuestionComplete: false });
alert("you answer has been deleted from the database");
}
QuestionOnChange(e) {
this.setState({ QuestionAnswer: e.target.value });
}
///////////////////////////////////////////
OnCommit(e) {
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");
let WorkStation = window.localStorage.getItem("Workstation");
const data = {
QuestionId: this.state.questions.QuestionId,
QuestionAnswer: this.state.QuestionAnswer,
date: date,
User,
WorkStation
};
fetch("/declined-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();
});
this.setState({ QuestionComplete: true, QuestionAccepted: true });
}
SubmitProblemSoloution(e) {
e.preventDefault();
let answer = this.state.problemDefinition;
let question = this.state.questions.Question;
let state = "problem";
let newItem = {
question: question,
answer: answer,
state: state
};
this.state.completedQuestions.push(newItem);
console.log(this.state.completedQuestions);
this.setState({
QuestionAccepted: false,
problem: true,
questionProblem: true,
problemSubmitted: true
});
}
////////////////////////////////////////////////
render() {
console.log(this.state.completedQuestions);
////////////////////////////////////////
if (!this.state.QuestionComplete) {
if (!this.state.ShowInput) {
return (
<div>
<div style={{ float: "right" }}>
<label>{" "}Problem</label>
<input
type="checkbox"
onClick={this.QuestionProblem}
className="btn btn-danger"
style={{ float: "right" }}
/>
</div>
<div style={{ float: "right" }}>
<label>{" "}No</label>
<input
type="checkbox"
onClick={this.QuestionDecline}
className="btn btn-danger"
style={{ float: "right" }}
/>
</div>
<div style={{ float: "right" }}>
<label> {" "}Yes</label>
<input
type="checkbox"
onClick={this.AcceptAnswer}
className="btn btn-danger"
style={{ float: "right" }}
/>
</div>
<br />
<li>{this.state.questions.Question}</li>
<br />
</div>
// </div>
);
} else if (
this.state.ShowInput &&
!this.state.QuestionComplete &&
!this.state.problem
) {
return (
<div>
<button
onClick={this.QuestionDecline}
style={{ float: "right", padding: "2px" }}
className="btn btn-secondary"
>
Revert
</button>
<li> Question : {this.state.questions.Question}</li>
<li>Answer: No</li>
<li>
Is this causing you a Problem?{" "}
<div style={{ float: "right" }}>
<label>{" "}No</label>
<input
type="checkbox"
onClick={this.AdmitNotProblem}
className="btn btn-danger"
style={{ float: "right" }}
/>
</div>
<div style={{ float: "right" }}>
<label> {" "}Yes</label>
<input
type="checkbox"
onClick={this.AdmitProblem}
className="btn btn-danger"
style={{ float: "right" }}
/>
<br />
<br />
<br />
</div>
</li>
<br />
</div>
);
}
} else if (this.state.QuestionComplete) {
if (
this.state.QuestionAccepted &&
!this.state.problem &&
!this.state.questionProblem &&
!this.state.problemSubmitted &&
!this.state.declineSubmitted
) {
return (
<h3>
<button
onClick={this.RevertDeclinedAnswer}
style={{ float: "right" }}
className="btn btn-danger"
>
{" "}
Revert Answer
</button>
<br />
<li style={{ textAlign: "center", color: "grey" }}>
<b>{this.state.questions.Question}</b>
</li>
<textarea
placeholder="What would you suggest we do to solve this? "
style={{ width: "100%" }}
onChange={e =>
this.setState({ soloutionForDeclinedQuestion: e.target.value })
}
/>
<button
onClick={this.submitDeclinedQuestionSoloution}
className="btn btn-primary"
style={{ width: "100%" }}
>
Submit suggestion
</button>
</h3>
);
} else if (
!this.state.QuestionAccepted &&
!this.state.problem &&
!this.state.questionProblem &&
!this.state.problemSubmitted &&
!this.state.declineSubmitted
) {
return (
<h3>
<button
onClick={this.RevertAcceptedAnswer}
style={{ float: "right" }}
className="btn btn-danger"
>
{" "}
Revert Answer
</button>
<br />
<li style={{ textAlign: "center", color: "grey" }}>
<b>{this.state.questions.Question}</b>
</li>
<li>
<b>Status</b>: Yes
</li>
<li>Complete : ✔️ </li>
</h3>
);
} else if (
!this.state.QuestionAccepted &&
this.state.problem &&
!this.state.questionProblem &&
!this.state.problemSubmitted &&
!this.state.declineSubmitted
) {
return (
<h3>
<button
onClick={this.RevertAcceptedAnswer}
style={{ float: "right" }}
className="btn btn-danger"
>
{" "}
Revert Answer
</button>
<br />
<li style={{ textAlign: "center", color: "grey" }}>
<b>{this.state.questions.Question}</b>
</li>
<li>
<b>Status</b>: No but not a problem
</li>
<li>Complete : ✔️ </li>
</h3>
);
} else if (
!this.state.QuestionAccepted &&
this.state.problem &&
this.state.questionProblem &&
!this.state.problemSubmitted &&
!this.state.declineSubmitted
) {
return (
<>
<h3>
<button
onClick={this.RevertAcceptedAnswer}
style={{ float: "right" }}
className="btn btn-danger"
>
{" "}
Revert Answer
</button>
<br />
<li> {this.state.questions.Question} </li>
<textarea
style={{ width: "100%" }}
onChange={e =>
this.setState({ problemDefinition: e.target.value })
}
placeholder={`Please specify the problem`}
/>
</h3>
<button
style={{ width: "100%" }}
className="btn btn-primary"
onClick={this.SubmitProblemSoloution}
>
Submit Solution{" "}
</button>
</>
);
} else if (
!this.state.QuestionAccepted &&
this.state.problem &&
this.state.questionProblem &&
this.state.problemSubmitted &&
!this.state.declineSubmitted
) {
return (
<>
<h3>
<button
onClick={this.RevertAcceptedAnswer}
style={{ float: "right" }}
className="btn btn-danger"
>
{" "}
Revert Answer
</button>
<br />
<li style={{ textAlign: "center", color: "grey" }}>
{" "}
<b>{this.state.questions.Question}</b>{" "}
</li>{" "}
<li>
<b>Status</b>: Problem with soloution submitted
</li>
<li>
<b>Soloution: </b>
{this.state.problemDefinition}
</li>
<li>Complete : ✔️ </li>
</h3>
</>
);
} else if (
!this.state.QuestionAccepted &&
this.state.problem &&
this.state.questionProblem &&
!this.state.problemSubmitted &&
this.state.declineSubmitted
) {
return (
<>
<h3>
<button
onClick={this.RevertAcceptedAnswer}
style={{ float: "right" }}
className="btn btn-danger"
>
{" "}
Revert Answer
</button>
<br />
<li style={{ textAlign: "center", color: "grey" }}>
{" "}
<b>{this.state.questions.Question}</b>{" "}
</li>{" "}
<li>
<b>Status</b>: Declined with soloution defined
</li>
<li>
<b>Soloution: </b>
{this.state.soloutionForDeclinedQuestion}
</li>
<li>Complete : ✔️ </li>
</h3>
</>
);
}
}
}
}
AcceptAnswer(e) {
e.preventDefault();
let answer = "yes";
let question = this.state.questions.Question;
let state = "Accepted";
let newItem = {
answer: answer,
question: question,
state: state
};
this.setState(state => ({
completedQuestions: state.completedQuestions.concat(newItem)
}));