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.
Erhalten Sie diesen Fehler in jedem Browser? – azium
@azium ja, der gleiche Fehler ... –
Hmm, nur um auf der sicheren Seite zu sein, 'console.log (fetch)' prints 'Funktion fetch()' richtig? – azium