2017-10-16 10 views
0

내 목표는 시작시 Purescript Thermite 구성 요소를 채우기 위해 원격 API를 호출하는 것입니다.이를 위해 componentDidMount 이벤트 처리기가 직접 필요하지 않습니다. 테르밋 볼 수 있지만 낮은 수준에 의해 노출되어PureScript Thermite 구성 요소에 componentDidMount 이벤트 수신기 추가

그래서 나는 componentDidMount 이벤트 리스너를 추가 할 createReactSpec 기능을 사용하려고 Purescript이 - 반작용 바인딩 반응하지만 난 엄격한 형식을 포함하는 형식이 일치를 얻을 수 변수 이해 (나는 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