如何验证测验应用程序的答案，从 reactjs 中的 json 获取的值？

Question

我正在开发一个 ReactJs 测验应用程序，我在验证 json 中的答案时遇到问题。

我使用 React 版本 16.8 使用状态组件完成了这个测验应用程序，并使用 map 函数获取了 json 数据并存储在状态中。我已经完成了视图部分，现在我开始验证测验，我在这部分中苦苦挣扎。

这里是完整代码：https://codesandbox.io/s/mystifying-firefly-2d2x5 还要添加我的 json 链接：http://myjson.com/kpop9

我希望答案应该得到验证，如果用户在尝试所有问题之前点击提交按钮，它应该显示您有未回答的问题，如果用户在尝试所有测验后点击提交，它应该显示用户获得的总分.

Answer 1

从上面回复您的评论，这里是您的沙盒代码稍作编辑。您可以随时提交答案，这些是您应该看到的警报：

• 当您不选择答案时：提示消息 No nulls
• 回答错误时：提示消息错误
• 当答案正确时：提示消息正确

Here is your edited sandbox

提供的解决方案只是示例，不应被视为完美的解决方案，它只是为了让您了解它是如何工作的（您可能仍想实施该位，在提交最后一个答案后，得分计算 - 为此您可能需要存储分数）

说明：

• 在本例中，我决定在 index.js 中添加 selected_answer 变量，该变量将当前选定的答案存储在表单上。
• 接下来，我在index.js 中创建了setAnswer 函数，该函数接受选定的答案作为参数并将selected_answer 的状态设置为传入的任何值。欢迎您对传递的值实施尽可能多的检查随心所欲
• 然后将setAnswer 函数传递给您的Answer 组件，因此当值更改时，可以将其保存在index.js 状态中
• Result 组件接收index.js 状态作为prop。这允许它访问当前问题、所有问题的数组和当前选择的值
• 在Result 组件内部有一个validateAnswer 函数，当点击submit 按钮时会触发该函数。在该函数中，我使用props.current_question（这是问题的索引）从您的 JSON 文件中提取整个问题对象。接下来，我从先前创建的question 对象中过滤答案数组，然后提取is_right 设置为1 的答案。最后，我检查props.selected_answer 是否为空，如果是则显示一条消息。如果不是，我检查它是否等于先前提取的正确答案对象的值。瞧！

如前所述，这不是最好的解决方案，但它可以在您的代码之上运行而无需进行太多更改。如果您有任何其他问题，请告诉我，但希望对您有所帮助。