如何在 Elm 中使用可变数量的 UI 元素构造消息和更新函数？答案

【问题标题】：How to structure message and update functions with a variable number of UI elements in Elm?如何在 Elm 中使用可变数量的 UI 元素构造消息和更新函数？
【发布时间】：2018-08-31 11:04:43
【问题描述】：

问候 StackOverflow！

假设我有一个 Elm 应用程序，其中包含可变数量的文本输入字段。我想在模型中反映这些输入字段的状态。

模型和视图很简单：视图只是在某处有一个Array String 字段。

然后通过在该字符串列表上调用List.map (HTML input ...) 来计算视图。

但是，我有点迷失了如何做更新功能和消息类型。

消息可能是这样的：

type Msg = InputFieldUpdated Int String

这里，Int 是指要更新的字符串在 Array 中的位置。但是，如果我这样做，我可以创建引用不存在的数组位置的消息，只需将 Int 设置为超出范围的值。

对于固定数量的输入元素，可以通过简单地为每个输入使用具有不同值的联合类型来非常优雅地解决这个问题，但是我的情况呢？在“使不可能的状态成为不可能”的领域中，我是否缺少一些技巧？

【问题讨论】：

你所描述的很常见。您不必担心 Elm 中的数组索引越界错误，因为 Array.get 返回一个 Maybe a 值。

标签： elm elm-architecture

【解决方案1】：

但是，如果我这样做，我可以通过将 Int 设置为超出范围的内容来创建引用不存在的数组位置的消息。

根据Array.set 的文档，如果索引超出范围，则数组保持不变。

请看看这个ellie-app example。它主要是对您所描述的问题进行建模。元素数组被渲染，元素可以动态添加：

view : Model -> Html Msg
view model =
    div []
        [ div [] (toList (Array.indexedMap viewElement model.elements))
        , button [ onClick Add ] [ text "Add" ]
        ]

为了更新一个特定的元素，你需要通过索引来获取它。由于Array.get 的结果类型是Maybe a，类型系统将强制您处理所有情况（当元素存在和不存在时）：

Increment index ->
    case get index model.elements of
        Just element ->
            { model | elements = set index (element + 1) model.elements }

        Nothing ->
            model

这个例子只是为了演示，如果你不需要当前元素，那么Array.set函数可以放心使用。

【讨论】：