0
我的目標是調用遠程api以便在啓動時填充Purescript Thermite組件,爲此我需要(我認爲)組件不是直接的事件處理程序可在鋁熱劑,而是由低級別暴露的反應綁定Purescript反應的將componentDidMount事件偵聽器添加到PureScript Thermite組件
所以我嘗試使用createReactSpec功能添加componentDidMount事件偵聽器,但我得到涉及剛性類型的類型不匹配變量,我沒有明白(我對purescript/haskell相當陌生)。
感謝您的幫助
下面是代碼:
module Main where
import Prelude
import Control.Monad.Eff (Eff)
import DOM (DOM) as DOM
import DOM.HTML (window) as DOM
import DOM.HTML.Document (body) as DOM
import DOM.HTML.Types (htmlElementToElement) as DOM
import DOM.HTML.Window (document) as DOM
import Data.Foldable (traverse_)
import React (ComponentDidMount, createClass, createFactory, transformState)
import React.DOM as R
import ReactDOM (render)
import Thermite as T
-- MAIN
main :: Eff (dom :: DOM.DOM) Unit
main = myMain componentSpec initialState unit
-- | A default implementation of `main` which renders a component to the document body.
myMain :: forall s p a eff . T.Spec eff s p a -> s -> p -> Eff (dom :: DOM.DOM | eff) Unit
myMain spec initialState props = void do
let reactSpec = (T.createReactSpec spec initialState).spec { componentDidMount = onMount }
let component = createClass reactSpec
document <- DOM.window >>= DOM.document
container <- DOM.body document
traverse_ (render (createFactory component props) <<< DOM.htmlElementToElement) container
onMount :: forall props eff . ComponentDidMount props State eff
onMount ctx = transformState ctx (\st -> st { status = "mounted" })
-- STATE
type State = { status :: String }
initialState :: State
initialState = { status: "nothing" }
-- COMPONENT STRUCTURE
componentSpec :: T.Spec _ State _ _
componentSpec = T.simpleSpec performAction render where
render :: T.Render State _ _
render dispatch _ s _ = [
R.div' [ R.text (s.status) ]
]
performAction :: T.PerformAction _ State _ _
performAction _ _ _ = void (T.cotransform (\state -> state { status = "something happened"}))
和錯誤消息:
Error found:
in module Main
at src/Main.purs line 25, column 31 - line 25, column 40
Could not match type
state4
with type
{ status :: String
}
while trying to match type ReactThis props3 state4
with type ReactThis t5
{ status :: String
}
while checking that expression reactSpec
has type { render :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, refs :: ReactRefs (() :: # Control.Monad.Eff.Effect)
, state :: ReactState
(read :: Read
)
| t2
)
ReactElement
, displayName :: String
, getInitialState :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState (() :: # Control.Monad.Eff.Effect)
, refs :: ReactRefs (() :: # Control.Monad.Eff.Effect)
| t2
)
t1
, componentWillMount :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs (() :: # Control.Monad.Eff.Effect)
| t2
)
Unit
, componentDidMount :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, componentWillReceiveProps :: ReactThis t0 t1
-> t0
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, shouldComponentUpdate :: ReactThis t0 t1
-> t0
-> t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Boolean
, componentWillUpdate :: ReactThis t0 t1
-> t0
-> t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, componentDidUpdate :: ReactThis t0 t1
-> t0
-> t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, componentWillUnmount :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
}
in value declaration myMain
where props3 is a rigid type variable
state4 is a rigid type variable
t2 is an unknown type
t1 is an unknown type
t0 is an unknown type
t5 is an unknown type