存储来自 mongodb 的值并验证

Question

我一直对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)

        })

});

应用程序.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');

    }

  };

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

我想添加一个函数，由于错误的答案会将颜色更改为红色，而正确的答案会将颜色更改为绿色，我想在执行 if() 后添加 css 类就足够了。对于我点击的按钮来说，做到这一点并不困难，但是其余的呢？

感谢您的任何建议！