此`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 Architecture的思维模型是错误的。您似乎将消息视为“操作”或函数调用，而不是事件，其中Add是一个接受参数以应用于模型的函数。

您应该将消息视为触发消息的描述。您可以将其命名为Add String，而不使用AddButtonClicked，不带任何参数（在这种情况下）。然后让更新函数仅基于模型中的内容执行应做的事情，我猜这是一个使用firstNum和secondNum的算术运算。

但是您也没有填充这些字段，您需要使用onInput事件来完成此操作，该事件确实需要您使用以String作为参数的消息。例如，您可以添加新消息FirstNumChanged String，然后将其与input一起使用，如下所示：

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

我将留给您了解如何在update中处理它。