我正在使用 purescript-halogen
构建一个简单的视频播放器组件。该组件应该显示一个只有一个输入按钮的空白 div,供用户选择一个本地文件,然后作为视频元素的源 URL。
我用普通的 javascript 完成了一个工作模型,并想将它移植到 purescript/halogen。我得到了要编译的 purescript 版本,但网络控制台给了我一条错误消息 Uncaught TypeError: component.initialState is not a function
并指向这个 MDN reference。
这表明我如何定义我的 initialState 函数存在问题,但它相当标准:
component :: forall q i o m. MonadAff m => H.Component q i o m
component =
H.mkComponent
{ initialState
, render
, eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
}
type State =
{ videoUrl :: Maybe String }
initialState :: forall i. i -> State
initialState _ =
{ videoUrl : Nothing
}
该函数是否有可能在其生命周期中的错误时间被调用,从而使其未定义?
该组件的代码托管在此 Github gist 上。我一直在关注这个 Github issue 作为参考。
我的package.json
:
"private": true,
"devDependencies": {
"parcel": "1.12.3",
"purescript": "^0.14.0",
"spago": "^0.19.1"
},
"scripts": {
"build": "spago build",
"test": "spago test",
"serve": "parcel dev/index.html --open",
"build-prod": "mkdir -p prod && cp dev/index.html prod/ && rm -rf dist && spago bundle-app --to prod/index.js && parcel build prod/index.html"
},
"dependencies": {
"node": "^15.12.0"
}
}
我使用 purescript v0.14.0
、spago v0.20.0
、node v16.3.0
编译并在 Firefox v89.0
中的 Ubuntu 20.04.2 LTS
上进行了测试。
答案 0 :(得分:0)
似乎该错误来自代码中的一个讨厌的行:
HH.input
[ ...
, HP.value "Select file"
...]
根据MDN,输入元素的value
属性用于保存所选文件的路径。因此,在元素创建期间设置它并不是一个明确定义的操作。
最终代码(按预期运行)是:
module App.Video (component) where
import DOM.HTML.Indexed.InputAcceptType (InputAcceptType, InputAcceptTypeAtom(..))
import Data.Foldable (traverse_)
import Data.Maybe (Maybe(..))
import Data.MediaType (MediaType(..))
import Data.Traversable (for_)
import Effect.Aff.Class (class MonadAff)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Prelude (Unit, bind, const, discard, pure, unit, ($), (=<<), (>>=))
import Web.Event.Event as Event
import Web.File.File as File
import Web.File.FileList as FileList
import Web.File.FileReader.Aff as FileReaderAff
import Web.HTML.HTMLInputElement as InputElement
data Action = HandleFileUpload Event.Event
type State =
{ videoUrl :: Maybe String }
component :: forall q i o m. MonadAff m => H.Component q i o m
component =
H.mkComponent
{ initialState
, render
, eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
}
initialState :: forall input. input -> State
initialState inp =
{ videoUrl : Nothing
}
render :: forall m slots. State -> H.ComponentHTML Action slots m
render state =
case state.videoUrl of
Nothing -> blank_player
Just url -> video_player url
supported_formats :: InputAcceptType
supported_formats =
HP.InputAcceptType
[ AcceptMediaType (MediaType "video/mp4")
, AcceptMediaType (MediaType "video/webm")
]
blank_player :: forall w. HH.HTML w Action
blank_player =
HH.div_
[ HH.span_ [HH.text "Choose file to upload"]
, HH.input
[ HP.type_ HP.InputFile
, HP.accept supported_formats
, HE.onChange HandleFileUpload
]
]
video_player :: forall w i. String -> HH.HTML w i
video_player url =
HH.div_ [
HH.video [HP.src url] []
]
handleAction :: forall m slots o. MonadAff m => Action -> H.HalogenM State Action slots o m Unit
handleAction = case _ of
HandleFileUpload ev → do
traverse_ handleFileUpload (InputElement.fromEventTarget =<< Event.target ev)
handleFileUpload :: forall m slots o. MonadAff m => InputElement.HTMLInputElement -> H.HalogenM State Action slots o m Unit
handleFileUpload inputEl = do
H.liftEffect (InputElement.files inputEl) >>= traverse_ \files ->
for_ (FileList.item 0 files) \file → do
video_url ← H.liftAff $ FileReaderAff.readAsDataURL (File.toBlob file)
H.modify_ (const { videoUrl : Just video_url})
pure unit