榆樹不匹配視圖列表

type Msg 
    = NoOp 
    | RequestDate 
    | ReceiveDate Date 
    | UpdateYouTubeUrl YouTubeUrl 

-- - 

root : Maybe YouTubeUrl -> Html Msg 
root youTubeUrl = 
    case youTubeUrl of 
     Just youTubeUrl -> 
      div [] 
       [ player youTubeUrl 
       , urlInput 
       ] 

     Nothing -> 
      urlInput 


player : YouTubeUrl -> Html Msg 
player youTubeUrl = 
    h1 [] [ text ("YouTube player for " ++ youTubeUrl ++ " goes here") ] 


urlInput : Html (YouTubeUrl -> Msg) 
urlInput = 
    input 
     [ placeholder "(Enter a YouTube embed URL and hit <Enter>)" 
     , onSubmit UpdateYouTubeUrl 
     ] 
     []

這給了我一個類型不匹配錯誤：榆樹不匹配視圖列表

-- TYPE MISMATCH ---------------------------------- ./src/YouTubePlayer/View.elm 

The 1st and 2nd entries in this list are different types of values. 

28|     [ player youTubeUrl 
29|>    , urlInput 
30|     ] 

The 1st entry has this type: 

    Html (Msg) 

But the 2nd is: 

    Html (YouTubeUrl -> Msg) 

Hint: It looks like a function needs 1 more argument. 

Hint: Every entry in a list needs to be the same type of value. This way you 
never run into unexpected values partway through. To mix different types in a 
single list, create a "union type" as described in: 
<http://guide.elm-lang.org/types/union_types.html> 

Detected errors in 1 module.

的錯誤是很清楚，問題是，我有

[ Html Msg 
, Html (YouTubeUrl -> Msg) 
]

列表.. 。在Elm中的列表需要是同質的，但我不明白的是爲什麼Html (YouTubeUrl -> Msg)是urlInput的類型簽名。我收集它與我使用onSubmit有關。

我是一個榆樹新手，所以我不知道我做錯了什麼。 Elm Guide book沒有任何類似於我看到的Html (a -> Msg)的例子。

elm 0.18

來源

2017-07-16 neezer

在你使用的onSubmit，其簽名的問題起源是這樣的：

onSubmit : msg -> Attribute msg

你傳遞一個構造函數，UpdateYouTubeUrl，這需要一個參數。爲了製作Msg使用UpdateYouTubeUrl，您必須傳遞YouTubeUrl類型的參數。該參數沒有被傳遞，所以Elm的編譯器告訴你urlElement函數需要一個參數YouTubeUrl。

我的預感是你打算使用onInput，它接受一個字符串值作爲輸入，你可以通過獲取輸入的targetValue來使用它。另外，onSubmit通常會包含輸入的表單元素。

大部分情況下，如果Elm編譯器告訴你它正在尋找一個返回值爲Html (a -> msg)的視圖函數，這可能意味着你錯過了函數某處的一個參數，因爲你的視圖通常應該是鍵入Html Msg（當然除了更高級的情況）。

來源

2017-07-16 02:44:52

啊，我現在看到了區別。我打算在表單中包裝'onSubmit'，因爲我不想觸發'onInput'，而是按Enter鍵;想到最簡單的方法就是鉤入一個'onSubmit'。 – neezer

你介意發佈一個如何用'onSubmit'完成這個工作的例子嗎？ – neezer

榆樹不匹配視圖列表

回答

相關問題