代码清理

代码清理

在连接列表、表单与性能一节中，我们已将列表直接连接到 Redux，设置了 UnitInfo 表单的基本编辑功能，并实现了切换“编辑”模式以选择 Pilot 的功能。这一次，我们将深入探讨管理表单变更事件的高级技术，实现模型条目的编辑功能，并使用自定义的 reducer 结构来处理功能逻辑。

但在进入本节的核心工作之前，我们需要先完成一些清理工作，为后续开发做好准备。

处理数据重新加载

当前 entitiesReducer 的逻辑存在一个问题：如果在会话中连续点击两次“加载单位信息”按钮，reducer 将尝试再次加载相同的示例数据，由于这些 ID 对应的数据已在状态中存在，会导致错误。我们可以通过在加载新数据前删除现有条目来解决这个问题。

提交 e5af624：加载时清除现有模型，避免重新加载数据时发生冲突

app/reducers/entitiesReducer.js

1    const {pilots, designs, mechs} = payload;
2
3+   // 清除状态中任何现有的模型，以避免重新加载数据时发生冲突
4+   [Pilot, Mech, MechDesign].forEach(modelType => {
5+       modelType.all().toModelArray().forEach(model => model.delete());
6+   });

虽然我们也可以通过使用之前提到的 Model.upsert() 方法来解决此问题，但最稳妥的做法还是在插入新数据前先删除旧的条目。

清理 PilotDetails 组件

由于我们之后需要在 <PilotDetails> 中添加回调函数来处理输入，现在是将其从函数式组件转换为类组件的好时机。

提交 f46122b：将 PilotDetails 转换为类组件

我们还将对 <PilotDetails> 表单进行一些重构。"枪法"和"驾驶"字段的取值范围有限，因此不妨改为下拉菜单。此外，Semantic-UI-React 的 <Form.Field> 组件支持一些有用的简写语法：你可以传入一个标签字符串和组件类型作为属性，它会自动渲染。同时，它还会将所有未知属性转发给其渲染的输入组件。以下是示例：

1-<Form.Field name="rank" width={16}>
2-   <label>Rank</label>
3-   <Dropdown
4-       fluid
5-       selection
6-       options={RANKS}
7-       value={rank}
8-       disabled={!canStopEditing}
9-   />
10-</Form.Field>
11+<Form.Field
12+   name="rank"
13+   label="Rank"
14+   width={16}
15+   control={Dropdown}
16+   fluid
17+   selection
18+   options={RANKS}
19+   value={rank}
20+   disabled={!canStopEditing}
21+/>

name、label 和 width 属性由 <Form.Field> 组件处理，它会渲染一个 <Dropdown> 实例，并将剩余属性传递给该组件。顺序在这里并不重要，我只是习惯先写 Field 的属性，再写 Dropdown 的属性。

至于哪种格式更优，可能见仁见智。两种方式各有优点。不过既然我已经完成了重构，我们就采用后一种方式。

提交 7fb450e：重构 PilotDetails 表单布局以保持一致性