2017-10-16 102 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 
相關問題