Javascript 存储来自mongodb的值​；验证

我一直对php和sql更感兴趣，但我决定学习更多关于js的知识。所以，我创建了一个测验应用程序。（reactjs、nodejs和mongodb） 应用程序工作！几乎。有些事情我不满意，我不知道如何解决它们

api.js

router.get('/', (req, res) => {
    Quiz.aggregate([ { $sample: { size: 1 } } ])
        .then((data) => {
            console.log('Data: ', data);
            res.json(data);
        })
        .catch((error) => {
            console.log('erorr: ', error)
        })
});

App.js

  getQuestionAndAnswers = () => {
    axios.get('http://localhost:8080/api')
      .then((response) => {
        const data = response.data;
        this.setState({posts: data});
        console.log('Data has been received');
      })
      .catch(() => {
        alert('Error retrieving data');
      })
  }


 displayQuiz = (posts) => {
    if (!posts.length) return null

    return posts.map((post, index) => (
      <div key={index}>
        <p>{post.question}</p>
        <button value={post.answer} onClick={(e) => this.checkAnswer(e, post)}><p>A. {post.answer}</p></button>
        <button value={post.answer2} onClick={(e) => this.checkAnswer(e, post)}><p>B. {post.answer2}</p></button>
      </div>
    ));
  };


 checkAnswer = (e,post) => {
    console.log(e.currentTarget.value);
    if(e.currentTarget.value === post.c_answer){
      console.log('correct');
    }else{
      console.log('incorrect');
    }
  };

getQuestionAndAnswers=（）=>{
axios.get（）http://localhost:8080/api')
。然后（（响应）=>{
const data=response.data；
this.setState（{posts:data}）；
console.log（'已收到数据'）；
})
.catch（（）=>{
警报（“检索数据时出错”）；
})
}
显示测验=（帖子）=>{
如果（！posts.length）返回null
返回posts.map（（post，index）=>(
{邮政问题}

this.checkAnswer（e，post）}>A.{post.answer}

这个.checkAnswer（e，post）}>B.{post.answer2}

));
};
检查答案=（e，post）=>{
console.log（e.currentTarget.value）；
if（e.currentTarget.value===post.c_答案）{
console.log（'correct'）；
}否则{
console.log（“不正确”）；
}
};

正如你所见，我将数据存储在按钮值中，我认为这不是最好的解决方案，因为存储在那里的答案可能很大，但我不知道如何做得更好。因此，我必须更改答案检查，因为在这一点上，我将正确答案与单击的值进行比较，是否有更好的解决方案

我想添加一个函数，因为不正确的答案会将颜色更改为红色，正确的答案会将颜色更改为绿色，我想在执行if（）后添加css类就足够了。对我来说，点击按钮并不难，但其余的呢

---

谢谢你的建议

而不是在

此处传递事件。检查答案（e，post）

您可以传递答案以与

c\u答案进行比较。您还可以创建一个单独的组件
问题
，其中每个
问题
组件都有一个状态来检查答案状态。您可以使用此状态在
Question
组件中定义类（最好使用道具或状态控制类的更改）：

displayquick=（posts）=>{
如果（！posts.length）返回null
返回posts.map（（post，index）=>）；
};
...
类问题扩展了React.Component{
状态={
应答状态：“待定”
}
检查答案=（答案，c_答案）=>{
const answerStatus=answer==c_-answer？“对”：“错”；
这个.setState（{answerStatus}）；
};
getAnswerClass=（）=>{
const{answerStatus}=this.state
if（answerStatus==‘待定’）{
返回“myPendingClass”；
}
return answerStatus=='right'？'myRightClass'：'MyErrorClass'；
}
render（）{
const{answer，answer2，c_answer，question}=this.props.post；
const answerClass=this.getAnswerClass（）；
{问题}

这个.checkAnswer（答案，c_答案）}>A.{answer}

这个.checkAnswer（answer2，c_answer）}>B.{answer2}

}
}
而是在
此处传递事件。检查答案（e，post）
您可以传递答案以与
c\U答案进行比较。您还可以创建一个单独的组件
问题
，其中每个
问题
组件都有一个状态来检查答案状态。您可以使用此状态在
Question
组件中定义类（最好使用道具或状态控制类的更改）：

displayquick=（posts）=>{
如果（！posts.length）返回null
返回posts.map（（post，index）=>）；
};
...
类问题扩展了React.Component{
状态={
应答状态：“待定”
}
检查答案=（答案，c_答案）=>{
const answerStatus=answer==c_-answer？“对”：“错”；
这个.setState（{answerStatus}）；
};
getAnswerClass=（）=>{
const{answerStatus}=this.state
if（answerStatus==‘待定’）{
返回“myPendingClass”；
}
return answerStatus=='right'？'myRightClass'：'MyErrorClass'；
}
render（）{
const{answer，answer2，c_answer，question}=this.props.post；
const answerClass=this.getAnswerClass（）；
{问题}

这个.checkAnswer（答案，c_答案）}>A.{answer}

这个.checkAnswer（answer2，c_answer）}>B.{answer2}

}
}
getAnswerClass（）函数只返回myRightClass或MyErrorClass，但我们知道只有一个答案是正确的，其余答案是错误的。有没有办法让myRightClass返回正确答案，让MyErrorClass返回错误答案？（在您的代码中有，但我在中编写了这个变量，因为这个变量在中对我没有用处）getAnswerClass（）函数只返回myRightClass或MyErrorClass，但我们知道只有一个答案是正确的，其余的都是错误的。有没有办法让myRightClass返回正确答案，让MyErrorClass返回错误答案？（在您的代码中有，但我在中编写此变量，因为此变量对我没有用处）
displayQuiz = (posts) => {
  if (!posts.length) return null

  return posts.map((post, index) => <Question post={post} key={index}>);
};
...

class Question extends React.Component {
  state = {
    answerStatus: 'pending'
  }

  checkAnswer = (answer, c_answer) => {
    const answerStatus = answer === c_answer ? 'right' : 'wrong';
    this.setState({ answerStatus });
  };

  getAnswerClass = () => {
    const { answerStatus } = this.state
    if ( answerStatus === 'pending') {
      return 'myPendingClass';
    }

    return answerStatus === 'right' ? 'myRightClass' : 'myWrongClass';
  }

  render() {
    const { answer, answer2, c_answer, question } = this.props.post;
    const answerClass = this.getAnswerClass();

    <div className={answerClass}>
      <p>{question}</p>
      <button onClick={(e) => this.checkAnswer(answer, c_answer)}><p>A. {answer}</p></button>
      <button onClick={(e) => this.checkAnswer(answer2, c_answer)}><p>B. {answer2}</p></button>
    </div>
  }
}