私はReact v15.3.2、Redux、React-refetch v1.0.0-beta.10を使用しています。ページを表示する前にデータを取得したいと思います。私のコード下:react-refetch: "fetchは関数でなければなりません"
レイアウトコンポーネント
/* 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>
)
}
}
ユーザーコンポーネント
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)
私は、サーバーを実行すると、私はこのエラーを取得:Invariant Violation: fetch must be a function. Instead received a undefined.
あなたは、私が「を教えてくださいすることができ間違ってる?
PS:私はrenderComponent
で静的なデータを入れて、export default User
へexport default connect...
を更新すると、それは働きます!
SOLUTION:
// Import librairies
require('isomorphic-fetch');
class ListUsers extends Component {
// Put the body of renderComponent() here
}
export default connect(...)
私にはわからない:は
1からisomorphic-fetch
をインストールし、構成要素としてListUsers
を追加 - User
コンポーネントで、
2 renderComponent()で<ListUsers />
を置きますそれが最善の解決策なら、それは私のために働く。
export default connect(props) => ({
userFetch: `https://jsonplaceholder.typicode.com/users`
})(User)
私は括弧を移動する方法を参照してください:それはすることになっていません。私はここにあなたのコードに誤りがあると思い
すべてのブラウザでこのエラーが発生しますか? – azium
@aziumはい、同じエラー... –
うーん、ちょうど安全な側にあるように、 'console.log(fetch)'を実行すると 'function fetch()'が表示されますか? – azium