Elm View Function Returns 一个函数而不是它的值

Question

Elm 编译器在我的视图函数中给出了这个错误...

类型不匹配 - 此 case 表达式的第二个分支有问题：

       div [] [
        div [] [text (String.fromInt value)],
        div [] [button [ onClick identity ] [ text "Enter number" ]]]

此 div 调用产生：

Html #(a -> a)#

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

Html #Msg#Elm

有谁知道我该如何解决这个问题？

谢谢！

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)



-- MAIN


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



-- MODEL


type alias Model = 
    Result String Int


init : Model
init =
  Result.Ok 0



-- UPDATE


type alias Msg = Int



update : Msg -> Model -> Model
update msg model =
  collatz msg


collatz : Int -> Result String Int
collatz start =
    if start <= 0 then
        Result.Err "Only positive numbers are allowed"

    else
        Result.Ok (collatzHelper start 0)


collatzHelper : Int -> Int -> Int
collatzHelper start counter =
    if start == 1 then
        counter

    else if modBy 2 start == 0 then
        collatzHelper (start // 2) (counter + 1)

    else
        collatzHelper (3 * start + 1) (counter + 1)



-- VIEW


view : Model -> Html Msg
view model =
    case model of
        Err err ->
            div [] [text err]

        Ok value ->
            div [] [
            div [] [text (String.fromInt value)],
            div [] [button [ onClick identity ] [ text "Enter number" ]]]

Answer 1

与 Elm 一样，编译器错误消息非常简单易懂。问题是这一行中的 onClick 属性：

div [] [button [ onClick identity ] [ text "Enter number" ]]

正如编译器所说，它的类型为 a -> a，而预期的类型为 Msg，在您的情况下与 Int 相同。也就是说，你传递了一个函数，它应该是一个整数。

因为 value 这里确实是一个 Int，这似乎是这里使用的自然选择：

div [] [button [ onClick value ] [ text "Enter number" ]]

这确实编译通过了。但是，这个应用程序似乎并不是特别有用，因为用户无法更改显示的值。您将需要在您的应用中包含某种数字输入以允许这样做 - 然后您将需要在您的 Msg 类型中使用一个新的替代方法来处理值的变化。

据此和您的 (which is where I assume you got the idea of using identity as an onClick value - unfortunately that doesn't work in general), you seem to be struggling a bit with how the Elm Architecture works, so if you haven't already I would strongly recommend going through the tutorial 判断。

Elm View Function Returns 一个函数而不是它的值

Elm View Function Returns a Function Instead of the Value of it

elm