2016-06-17 13 views
5

ho un app reagire ed ecco il mio codice del server:Reagire server non partire - qualcosa con renderProps

app.get('*', (req, res) => { 
    let history = createMemoryHistory(); 
    let store = configureStore(); 
    let routes = createRoutes(history); 
    match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { 
    if (redirectLocation) { 
     res.redirect(301, redirectLocation.pathname + redirectLocation.search); 
    } else if (error) { 
     res.status(500).send(error.message); 
    } else if (renderProps == null) { 
     res.status(404).send('Not found'); 
    } else { 
     let { query, params } = renderProps; 
     let comp = renderProps.components[renderProps.components.length - 1]; 
     console.log('fetching'); 
     comp.fetchData({ store, params }) 
     .then(() => { 
      console.log('done fetching'); 
      let html = ReactDOMServer.renderToString(
       <Provider store={store}> 
       { <RouterContext {...renderProps}/> } 
      </Provider> 
     ); 
      const template = store.getState().template; 
      const og = templateToOpenGraph(template); 
      const full = wrap(html, store.getState(), og); 
      res.set({ 'Cache-Control': 'public, max-age=300' }) 
      res.send(full); 
     }) 
    } 
    }); 
}) 

Quando avvio il server, si avvia bene. Ma quando ho colpito un percorso (qualsiasi percorso), ottengo un errore: TypeError: comp.fetchData is not a function

Cosa devo fare? Non sono il massimo nel reagire, quindi se mi manca qualcosa di ovvio, per favore fammelo sapere.

Grazie!

+0

Non sembra che si tratti di un problema di risposta in caso di errore sul lato server. Quale libreria viene utilizzata qui? "let comp = renderProps.components [renderProps.components.length - 1];" leggere la documentazione per quella libreria dovrebbe rispondere alla tua domanda. – Dave

+1

@Dave Molte persone usano reagire dal lato server ... – ivarni

risposta

1

Nel metodo deve essere presente il metodo fetchData.

non ho il tuo percorsi di configurazione ma per esempio si ha qualcosa di simile nel tuo routes.js file di

<Route path="/" component={Root}> <Route path="view/:id" component={View} /> ... </Route>

Quando si carica la pagina http://example.com/view/1231 nel browser, componente View sarà reso. È necessario implementare il metodo fetchData. Questo metodo verrà chiamato prima del rendering View

class View extends React.Component { 
    fetchData() { 
    // implement fetch data here 
    } 
    ... 
} 
Problemi correlati