2016-11-07 3 views
2

Ich benutze React v15.3.2, Redux und React-refetch v1.0.0-beta.10 und ich möchte Daten holen, bevor die Seite gerendert wird. Im Folgenden mein Code:react-refetch: "fetch muss eine Funktion sein"

Layout-Komponente

/* Import libraries */ 
export default class extends Component { 
    ... 
    render() { 
     return (
      <Provider store={ this.store }> 
       { this.renderComponent() } 
       // In this case, I would render User component(see code below) 
      </Provider> 
     ) 
    } 
} 

Benutzerkomponente

import React from 'react' 
import {connect, PromiseState} from 'react-refetch' 
import Layout from 'layout' 
class User extends Layout { 
    renderComponent() { 
     const {userFetch} = this.props; 

     if (userFetch.pending) { 
      return <p>Pending</p> 
      } else if (userFetch.rejected) { 
      return <p>Rejected</p> 
      } else if (userFetch.fulfilled) { 
      return <p>Fulfilled</p> 
      } 
     } 
} 

export default connect(props => ({ 
    userFetch: `https://jsonplaceholder.typicode.com/users` 
}))(User) 

Wenn ich den Server laufen, bekomme ich diesen Fehler: Invariant Violation: fetch must be a function. Instead received a undefined. Können Sie mir bitte sagen, was ich m falsch machen?

PS: Wenn ich statische Daten in renderComponent setzen und aktualisieren export default connect... zu export default User, es funktioniert!

LÖSUNG:

1 - in User Komponente, setzen <ListUsers /> in renderComponent()

2 - isomorphic-fetch Installieren und ListUsers als Komponente hinzufügen:

// Import librairies 
require('isomorphic-fetch'); 
class ListUsers extends Component { 
    // Put the body of renderComponent() here 
} 
export default connect(...) 

Ich weiß nicht, wenn es die beste Lösung ist, aber es funktioniert für mich.

+0

Erhalten Sie diesen Fehler in jedem Browser? – azium

+0

@azium ja, der gleiche Fehler ... –

+0

Hmm, nur um auf der sicheren Seite zu sein, 'console.log (fetch)' prints 'Funktion fetch()' richtig? – azium

Antwort

-2
export default connect(props => ({ 
    userFetch: `https://jsonplaceholder.typicode.com/users` 
}))(User) 

Ich denke, es ist ein Fehler im Code hier: wird es nicht sein soll:

export default connect(props) => ({ 
    userFetch: `https://jsonplaceholder.typicode.com/users` 
})(User) 

Sehen Sie, wie ich die Klammern bewegt?

+0

Nein, das ist nicht einmal die richtige Syntax ... 'connect (...)' gibt eine Funktion zurück, so dass seine ursprüngliche Syntax gültig war. –

+0

Ich kann meinen Code nicht runterladen :) –

Verwandte Themen