Question

这似乎设置正确，但显然不是，我无法看到它出错的地方。我正在尝试遍历“对象列表”，并为列表中的每个项目创建ul li个，并将其放在div内。忽略涉及ID的所有内容。我有一种感觉，我不完全确定List.map如何返回。

type alias Product =
  { a : String
  , b : String
  , c : Int
  , d : String
  , e : String
  }

type alias Model =
  { id : String
  , products : List Product}

view : Model -> Html Msg
view model =
  div []
    [ input [ type' "text", onInput UpdateText ] []
    , button [ type' "button", onClick GetProduct ] [ text "Search" ]
    , br [] []
    , code [] [ text (toString model.products) ]
    , div [] [ renderProducts model.products ]
    ]

renderProduct product =
  let
    children =
      [ li [] [ text product.a ] 
      , li [] [ text product.b ] 
      , li [] [ text (toString product.c) ] 
      , li [] [ text product.d ] 
      , li [] [ text product.e ] ]
  in
    ul [] children

renderProducts products =
  List.map renderProduct products

错误如下：

The 2nd argument to function `div` is causing a mismatch.

  78|       div [] [ renderProducts model.products ]
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:

  List (VirtualDom.Node a)

But it is:

  List (List (Html a))

Answer 1

renderProducts返回元素列表。 div的第二个参数采用元素列表。通过将第二个参数括在括号中，您将创建一个包含单个元素列表的列表。这就是错误消息所说的原因

But it is:

    List (List (Html a))

你应该这样做：

div [] (renderProducts model.products)

循环遍历列表以创建元素

1 个答案: