1

我正在使用两个@apollo/react-hooks 的 useQuery 钩子来查询我的数据库，但我注意到在将它们打印到控制台时数据未定义。我尝试了很多东西，但无法修复它。然后我尝试切换钩子的顺序，并注意到第一个顺序的钩子总是返回正确的数据。

我已经在我的操场上验证了查询是正确的，因为它们都可以工作，但只有第一个可以。

const { loading: loadingFeaturedStores, error: errorFeaturedStore, data: featuredStoreData } = useQuery(GET_FEATURED_STORES);

const { loading: loadingStores, error: errorStore, data: normalStoreData } = useQuery(GET_STORES);

const renderStores = ({ type }: { type: string }): StoreCard | string => {
    const loading = type === 'featured' ? loadingFeaturedStores : loadingStores;
    const error = type === 'featured' ? errorFeaturedStore : errorStore;
    if (!loading) {
        return 'Loading...';
    }
    if (error) {
        return `Error: ${error.message}`;
    }
    const stores = type === 'featured' ? featuredStoreData.stores : normalStoreData.stores;
    const title = type === 'featured' ? 'Featured' : '';
    console.log(JSON.stringify(featuredStoreData)); //returns correctly
    console.log(JSON.stringify(normalStoreData)); //undefined

    if (!stores) {
        return null;
    }

    return stores.map(
        (store): StoreCard => (
            <div>
                <h2>{title} Stores</h2>
                <StoreCard
                    key={`store-${type}-key-${store.store_id}`}
                    name={store.name}
                />
            </div>
        )
    );
};

在 console.logs 中，打印第一个钩子的总是返回正确的数据。因此，例如，如果我将钩子的顺序切换为...

const { loading: loadingStores, error: errorStore, data: normalStoreData } = useQuery(GET_STORES);  
const { loading: loadingFeaturedStores, error: errorFeaturedStore, data: featuredStoreData } = useQuery(GET_FEATURED_STORES);

第二个 console.log 将为我提供正确的数据。

先感谢您！我会回去使用 Apollo-React 的，但想尝试一下功能组件和钩子。

编辑：经过更多时间的测试，它似乎与加载无法按预期工作有关？似乎总是卡在加载条件下，即使它不应该。

编辑 2：我将加载逻辑和数据到 store 组件的映射移到功能组件的 render 方法中，并且它像广告宣传的那样工作。在尝试以功能组件方法呈现我的商店组件时，我仍然无法通过加载。反应没有重新渲染我的组件，因为它没有检测到变量加载一旦变为假就会导致的变化？

4

1 回答 1

2

问题是我的情况是!loading它应该是什么时候loading导致什么都没有渲染。

让这件事让我自己感到羞耻，以防我的任何代码对其他人有所帮助。

于 2019-08-10T23:25:04.197 回答