React Redux Firebase - 使用 firestore 时，第一个文档的 isLoaded 仅为 false

Posted 2023-02-22

【中文标题】React Redux Firebase - 使用 firestore 时，第一个文档的 isLoaded 仅为 false

【英文标题】：React Redux Firebase - isLoaded only false for the first document when using firestore

【发布时间】：2021-01-13 16:24:34

【问题描述】：

在我的应用程序中，我使用react-redux-firebase 版本2.5.1 和redux-firestore 版本^0.13.0。我呈现与客户的对话列表（称为线程），每次用户转到另一个线程时，直到它被加载，我希望他看到一个加载微调器。我的问题是，只有当我在应用程序部署后第一次进入线程时，微调器才会显示，之后每次我更改线程时，方法 isLoaded 总是正确的，即使我看到了几秒钟页面显示上一个线程。有没有人遇到过这样的事情，可以帮我解决一下吗？

这是我的组件

const mapStateToProps = (state, props) => 
    const customerId = props.match.params.id;
    return 
        thread: state.firestore.data.thread,
        ...
    ;
;

export default compose(
    withStyles(styles),
    connect(mapStateToProps, mapDispatchToProps),
    firestoreConnect(props => [
        
            collection: "thread",
            doc: props.customerId,
            storeAs: "thread"
        
...
    ])
)(ThreadView);

这是我的渲染方法

       render() 
            const firebase, thread = this.props;            
            const res = !isLoaded(thread); // after the first load it's always false
            console.log(`customerId: $customerId, isLoaded: $res`)
            if (res) 
                return <LoadingSpinner/>;
            
...

【问题讨论】：

我认为这是预期的功能。通常，isLoaded 属性表示第一次加载内容。出于您的目的，我认为需要isLoading。

好的，但我在 react-redux-firebase api 方法中看不到 isLoading 那么你的意思是什么？

【参考方案1】：

我也遇到了这个问题，目前还没有找到满意的解决方案。但是，我确实找到了解决方法：

编写一个自定义的isLoaded 函数来检查任何正在进行的请求：

const checkIsLoaded = function(firestore) 
    return !Object.values(firestore.status.requesting).find(isRequesting => isRequesting);
;

因为所有当前待处理请求的状态（真/假）都保存在 firestore.status.requesting 下的 redux 存储中，我们可以检查一下，看看当前是否有任何请求仍在加载！

这不是一个理想的解决方案，因为它会检查所有正在进行的请求，而不仅仅是您要检查的特定请求。但是，根据您的用例，这可能就足够了。