elm - 这个 `div` 调用产生 : Html (String -> Msg) But the type annotation on `view` says it should be: Html Msg

Question

我目前正在学习 elm，我只是偶然发现了 div 返回 Html (String -> Msg) 而不是 Html Msg 的问题。

我收到的错误信息

这个 div 调用产生:

Html (String -> Msg)

但是 view 上的类型注释说它应该是:

Html Msg

type alias Model =
   {
       firstNum: String,
       secondNum: String,
       answer: String
   }

init: Model 
init = { firstNum = "",
        secondNum = "",
        answer = ""}

type Msg =
    Add String| Minus String

update: Msg -> Model -> Model
update msg model =
    case msg of 
        Add  x -> { model | answer = x}
        Minus  y -> { model | answer = y}

view : Model -> Html Msg
view model =
    div [] 
    [
        input [ placeholder "Text to reverse", value model.firstNum] [],
        button [onClick Add] [text "add"],
        div [] [text model.answer]
    ]


main = 
  Browser.sandbox
  { init = init,
    update = update,
    view = view
  }

Answer 1

您将Msg 类型定义为

type Msg =
    Add String| Minus String

Add 接受一个 String 参数，但是当你在这里使用它时:

button [onClick Add] [text "add"],

你根本没有给它任何论据。

潜在的问题似乎是您对 Elm 架构的心理模型是错误的。您似乎将消息视为“操作”或函数调用而不是事件，其中 Add 是一个函数，它接受一个应用于模型的参数。

您应该将消息视为对触发消息的描述。您可以将它称为 AddButtonClicked，而不是 Add String，不带任何参数(在本例中)。然后让更新函数根据模型中的内容执行它应该执行的操作，我猜这是对 firstNum 和 secondNum 的算术运算。

但是您也没有填充这些字段。为此，您需要使用 onInput 事件，该事件会请求一 strip 有 String 的消息。例如，您可以添加一条新消息 FirstNumChanged String，然后将其与 input 一起使用，如下所示:

input [ placeholder "Text to reverse", onInput FirstNumChanged, value model.firstNum] [],

我会留给您解决如何在 update 中处理它。