【开发】MBTI 答题小程序开发笔记-3

1 开始

遵守先开发页面，再开发样式，再开发逻辑的顺序。
下面做答题页面，创建文件夹并编写路由。

接下来，还是一样，想要什么组件就往里加。慢慢调整出自己想要的页面。初步效果如下： 

我们需要把测试用的题目包装成数据进行测试，就新建一个data文件夹，里面放问题和答案的数组json文件。

题目示例：

2 编写动态页面

然后在我们的答题页面引入。

动态部分：

 其中，

const[current,setCurrent]=useState<number>(1);

这行代码是 React 函数组件中使用 Hook 的一种常见方式，使用了useState这个 Hook。useState用于在函数组件中添加状态。

这段代码的作用是创建了一个名为current的状态变量，并且提供了一个名为setCurrent的函数来更新这个状态。

• useState<number>(1);：这里使用了 useState，<number>是类型注解，表示这个状态变量的类型是number。1是这个状态变量的初始值。
• const [current, setCurrent] = useState<number>(1);：这里使用了数组的解构赋值语法。useState返回的是一个数组，第一个元素是当前状态值，第二个元素是一个函数，用于更新这个状态。所以，current是当前的状态值，setCurrent是用来更新状态的函数。

2.1 调整样式

根据自己喜好调就行，右边是效果

接下去调整按钮的动态显示，我们在第一题到倒数第二题之间需要“下一题”按钮，用 条件 && 按钮即可。“查看结果”、“上一题”的动态展示也是同理。（图中代码勘误，length 不用 -1）

要让按钮实现题目变换，就需要在点击按钮之后改变题号，简单用 onClick 实现。

2.2 useEffect

useEffect可以用一个变量驱动另一个变量变化。

useEffect 是 React 中的一个 Hook，它允许你在函数组件中执行副作用操作。副作用操作可以是数据获取、订阅外部数据源或者与浏览器进行交互等操作。使用 useEffect，你可以告诉 React 在组件渲染后执行某些操作，或者在组件更新后执行某些操作。

useEffect 接受两个参数：一个是包含副作用的函数，另一个是依赖项数组。依赖项数组是可选的，如果提供了这个数组，那么只有当数组中的值发生变化时，副作用函数才会被执行。

这里我们就使用这个 Hook，用我们已经实现的 current 题号递增，来实现题目和选项的切换。

2.3 选项选中 & 历史选项的记录

以上内容做完之后，我们还不能答题，因为我们没有在单选按钮上设置事件，也没有存储历史选过的选项（这样的话在用户点击上一题后，就无法显示之前选择的选项）。

此时我们再用useState设置两组数据，

• 一组是当前答案，用 string 存储，初值为空
• 另一组是答案列表，用 string 数组存储，初值为空数组。不用设置setXXX，因为不需要改变它的值。
  

当用户选中选项时，需要做两件事情，set 当前答案，和记录历史回答。

效果如图：

为了测试，我们可以把历史回答列表打印出来，看看效果。

然后会发现，如图，如果用户不选，直接下一题，就会导致有 null，数据残缺，所以我们就做一个限制，让用户必须选择，才能到下一题，这样就能避免一些错误。

在下一题按钮上用一个 disabled，用户没有选择时就禁用。查看结果按钮也是一样。这样就能实现不允许选项为空值。

至此，答题页面结束。~