这个`div` 调用产生： Html (String -> Msg) 但是`view` 上的类型注释说它应该是： Html Msg

Question

我目前正在学习榆树，我只是偶然发现了这个问题，即 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是一个将参数应用于模型的函数。

相反，您应该将消息视为对触发它的原因的描述。取而代之的是Add String，您可以AddButtonClicked不带参数地调用它（在这种情况下）。然后让更新函数根据模型中的内容做它应该做的事情，我猜这是对firstNumand的算术运算secondNum。

但是您也没有填充这些字段。为此，您需要使用该onInput事件，该事件确实要求一条带有String. FirstNumChanged String例如，您可以添加一条新消息，然后input像这样使用它：

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

我会把它留给你来弄清楚如何处理它update。