ComponentWillMount内でajaxを送信する方法$は未定義です

Question

私はアプリケーションにサーバー側のレンダリングを使用していますが、ページをレンダリングする前にAPIを使用してデータをロードします。 私は、サーバー側とクライアント側の両方をレンダリングする前にコンポーネントWillMountが呼び出されたが、ajaxコードは実行していないことがわかりました。 $が定義されていないと言って、 ページをレンダリングする前にデータをロードする方法を教えてください。

Answer 1

これは、質問の詳細が不足しているため、一般的な回答になります。しかし、私はそれが主題についていくつかの光を放つことを願っています。

私の個人的な経験に基づいて、サーバーのレンダリングに反応するならば、全体の状態を処理する「コントローラー」コンポーネントを用意するほうがよいでしょう。その下のものはすべてAjaxに依存しません。データをまったく読み込みません。たとえば、Reduxを使用している場合、この「コントローラ」コンポーネントはProviderになります。これは、1つのコンポーネントがすべてのコンポーネントよりもサーバーとクライアントを処理する方がはるかに簡単なためです。

外部の「コントローラ」コンポーネントは、サーバー上にあるかどうかを知って、それに従ってデータを別々に読み込む必要があります。これを行う1つの方法は、「ウィンドウ」が定義されているかどうかを確認することです。つまり、サーバー上にいる場合は、Ajax al allを使用して初期状態をロードしないでください。ただし、クライアント上にいる場合は、Ajaxを使用してください。

最後に問題が1つあります。サーバーレンダリングを実行するときに、クライアントがサーバーにラウンドトリップして既に持っているのと同じデータを取得しないようにします。これを防ぐために、スクリプトブロックをクライアント上で実行するようにします。このスクリプトブロックには、初期状態が含まれています。この変数が設定されている場合は、Ajaxを実行しないでください。このように：

<script> 
    window._serverState = {...} 
</script> 

もう一つ..私は個人的に私が反応とは思わないとjQueryを一緒に使用する必要がありますAjaxのための$を使用しないでください。チェックアウト：Axios

Answer 2

一般に、componentWillMountにajaxコールを発信することはお勧めできません。 componentWillMountレンダリングの直後にレンダリングが行われるので、レンダリングはajax呼び出しが完了して新しいデータを取得するまで待たなければなりません。

それは空の状態データで初めて行わレンダリングを取得する方が良いでしょうが

data:[] 

を言うとcomponentDidMountにAJAX呼び出しを行うことができます、これはあなたがDOM操作を行うとAjaxリクエストを送ることができる場所です。

componentDidMount() { 
sendAjaxRequest() 
.then(
     (newDataFromServer) => { 
       this.setState({data : newDataFromServer }); 

    }); 
} 

新しいデータがサーバーからフェッチされた後は、新しいデータ

this.setState({data:newDataFromServer}); 

で状態を設定します。これは、サーバーと新しい状態の変化からフェッチされた最新のデータが反映されることになると発生する再レンダリングが発生します。