Question

我的Tabbar（Material-ui）中包含一个react组件。

这个组件有很多Apollo useQuery钩子（15 useQuery）来获取一些数据。我尝试使用loading的参数，这些参数是每个useQuery的结果，以防止无用的呈现。

    const { loading: loading_1, data: data_1} = useQuery<GetQuery1>(QUERY_1);
    const { loading: loading_2, data: data_2} = useQuery<GetQuery2>(QUERY_2);
    const { loading: loading_3, data: data_3} = useQuery<GetQuery3>(QUERY_3);

    // . . .

    const { loading: loading_15, data: data_15} = useQuery<GetQuery15>(QUERY_15);

    if (
        loading_1 ||
        loading_2 ||
        loading_3 ||
        // ... loading parameters
        loading_10
    ) {
        return <span>Loading...</span>;
    } 

    return (
        <>
            {loading_11 ? ("Loading ... 11") : (<MyComponent_A data={data_11} options={data_6,data_7}/> )}
            {loading_12 ? ("Loading ... 12") : (<MyComponent_B data={data_12} options={data_1,data_2,data_8}/> )}
            {loading_13 ? ("Loading ... 13") : (<MyComponent_C data={data_13} options={data_4,data_7,data_9}/> )}
            {loading_14 ? ("Loading ... 14") : (<MyComponent_D data={data_14} options={data_8,data_10}/> )}
            {loading_15 ? ("Loading ... 15") : (<MyComponent_E data={data_15} options={data_3}/> )}
        </>
    );

该组件首次出现时，我能够控制渲染，因为加载useQuery挂钩的参数返回true。

但是，当我重新打开该组件时（我刚刚单击了其他选项卡，然后又回来了），该组件始终渲染15次（我只对每个组件使用console.log()进行了打印）。我检查了加载参数，那些参数从来没有true。

因此，当我重新打开该组件时，我什至没有收到加载消息，感觉好像有点停止了。

我该如何解决？

如何防止Apollo usequery重新渲染React组件？

0 个答案: