将componentDidMount事件侦听器添加到PureScript Thermite组件

时间:2017-10-16 17:26:12

标签: reactjs purescript

我的目标是调用远程api以便在启动时填充Purescript Thermite组件,为此我需要(我认为) componentDidMount 事件处理程序,它不能直接在Thermite上使用,但是由较低级别暴露的反应绑定 Purescript-React

所以我尝试使用 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

1 个答案:

答案 0 :(得分:0)

我通过在 myMain 签名

中使用状态类型解决了我的问题

我换了:

myMain :: forall s p a eff . T.Spec eff s p a -> s -> p -> Eff (dom :: DOM.DOM | eff) Unit

by:

myMain :: forall p a eff . T.Spec eff State p a -> State -> p -> Eff (dom :: DOM.DOM | eff) Unit