レンダリングしない - 私は私のAPI GraphQLにクエリを作るためにアポロクライアントを使用して反応させ、Reduxのアプリを持っている

Question

を反応します。

私はGridContainerWithDataがgraphqlで問い合わせを行うのconst（gql` ...）

これはデータ私の中を返すですexport default connect(mapStateToProps, mapDispatchToProps)(GridContainerWithData);を使用してクエリの呼び出しを行うことGridContainerを持っていますエラーが存在し、ロード状態（真または偽）がある場合は、クエリー応答を含む小道具。

は今、私は自分自身がif(loading) {}を使用してロードを管理しています。

この問題は、クエリの読み込みが行われたときに、それは再びロード状態でだとするとき、私のコンポーネントをレンダリングしています。私はif(loading) {}を使用しない場合、私は、クエリは、負荷状態にあるときに何かを返す必要というエラーを取得します。

がのローディングのときにコンポーネントに表示されないようにする方法はありますか？

私は

shouldComponentUpdate (nextProps) { 
    if (this.props.data.loading !== nextProps.data.loading) { 
     console.log(‘i will rerender’, nextProps.data.loading); 
     return true; 
    }else { 
     return false; 
    } 
} 

が、そこに運を使用してみました。

がのローディングのときにコンポーネントに表示されないようにする方法はありますか？

編集：

これは誰でも助けることができる場合、これは私のGridContainerです。

class ActionsToDoGridContainer extends Component { 

render() { 
    const {error} = this.props.data; 

    if (error) { 
    return (
     <div className='ComponentDistance'> 
     An unexpected error happened : 
     {error} 
     </div>); 
    } else { 
    return (
     <div className='ComponentDistance'> 
      <ActionsToDoGrid {...this.props}/> 
     ActionsToDoButtons {...this.props}/> 
     </div> 
    ); 
    } 
    } 
} 

Answer 1

編集：質問のポスターは、このコードで自分の問題を解決：

shouldComponentUpdate(nextProps) { 
    if (nextProps.data.loading === false) { 
    return true; 
    } else { 
    return false; 
    } 
} 

私はあなたがshouldComponentUpdateで右方向に考えて、代わりのロードかどうかをチェックされたと思います状態が異なる場合は、データが異なるかどうかを確認してください。

shouldComponentUpdate (nextProps) { 
    const thisData = this.props.data.queryDataResponse; 
    const nextData = nextProps.data.queryDataResponse; 
    if (!someLibrary.deepEquals(thisData, nextData)) { 
     return true; 
    }else { 
     return false; 
    } 
} 

データが変更された場合、あなたの関数はtrueを返し、更新します。あなたはいくつかのエッジケースを実行する可能性がありますので、壊れているときにこの関数を忘れないでください