2017-10-16 123 views
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 

回答

0

我在myMain签名使用国家型解决我的问题我的替换:

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

由:

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