2017-10-16 21 views
0

私の目標は、起動時にPurescript Thermiteコンポーネントを生成するためにリモートAPIを呼び出すことです。これはcomponentDidMountイベントハンドラが直接的ではないテルミットで使用可能ですが、低いレベルで公開されては、だから私はcomponentDidMountイベントリスナーを追加するcreateReactSpec機能を使用しようが、私はリジッドタイプを含む型の不一致を取得バインディングPurescript反応しPureScript Thermiteコンポーネントに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 
関連する問題