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

祝贺你

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

模型和视图非常简单：视图的某个地方有一个

数组字符串
字段

然后，只需对该字符串列表调用
List.map（HTML输入…
）即可计算视图

但是，我有点不知道如何执行更新功能和消息类型

消息可能是这样的：

type Msg=InputFieldUpdated Int String

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

对于固定数量的输入元素，只需对每个输入使用具有不同值的联合类型，就可以非常优雅地解决此问题，但我的情况如何？在“使不可能的状态成为不可能”的领域中，有没有一些技巧是我遗漏的

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

根据的文档，如果索引超出范围，数组将保持不变

请看一下这个。它主要模拟了您描述的问题。渲染元素数组，可以动态添加元素：

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

为了更新特定元素，您需要通过索引获取它。由于来自的结果类型是
可能是
，因此类型系统将强制您处理所有情况（当元素存在且不存在时）：

该示例仅用于演示目的，如果您不需要当前元素，则可以安全地使用该函数。
您所描述的内容非常常见。您不必担心Elm中的数组索引越界错误，因为
array.get
返回一个
可能是一个
值。
Increment index ->
    case get index model.elements of
        Just element ->
            { model | elements = set index (element + 1) model.elements }

        Nothing ->
            model