时间戳

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

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

问题描述

我目前正在学习榆树，我只是偶然发现了这个问题，其中 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
  }

标签： elm

解决方案

您将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。

推荐阅读