Question

我是Elm的新手，之前我正在做React，Redux，ES6 需要帮助使用Array而非List优化以下计数器示例。获取错误类型不匹配当我尝试使用Array Set/Get方法时。

import Html exposing (beginnerProgram, div, button, text, p, Html, span)
import Html.Events exposing (onClick)
import Array

main =
  beginnerProgram { model = [0,7], view = view, update = update }


view model =
  div []
    [ div [] [ button [ onClick AddCounter ] [ text "Add Counter" ] ]
      , div [] (List.indexedMap  (\index data -> (viewCounter index data)) model)
    ]
viewCounter: Int -> Int -> Html Msg
viewCounter index data =
    div [] [
    p [] [text ("Counter " ++ toString index )]
    , button [ onClick (Decrement index) ] [ text "-" ]
    , span [] [ text (toString data) ]
    , button [ onClick (Increment index) ] [ text "+" ]
    ]


type Msg = 
  AddCounter 
  | Increment Int
  | Decrement Int

incrementSelectedIndex index selectedIndex data = 
  if index == selectedIndex then data + 1
  else data

decrementSelectedIndex index selectedIndex data = 
  if index == selectedIndex then data + 1
  else data


update msg model =
  case msg of
    AddCounter ->
      List.append model [0] 

    Increment selectedIndex ->
      (List.indexedMap  (\index data -> 
        (incrementSelectedIndex index selectedIndex data)) model)  

    Decrement selectedIndex ->
      (List.indexedMap  (\index data -> 
        (decrementSelectedIndex index selectedIndex data)) model)

Answer 1

Array.get返回Maybe a，因为找不到请求的索引。这可能与您有经验的其他语言不同，当索引超出范围时，往往会抛出异常。

在Elm中，Maybe类型有两个可能的值：Nothing和Just a，其中a是您关注的实际值。

您可以使用case语句来区分这两个选项。以下是使用数组Increment和get函数set案例的示例：

Increment selectedIndex ->
  case Array.get selectedIndex model of
    Just val -> Array.set selectedIndex (val + 1) model
    Nothing -> model

请注意，如果我们要求不存在的索引，我们将获得Nothing并返回原始数组而不是使程序崩溃。

使用List的Elm多计数器代码

1 个答案: