加载状态在 React 应用程序 (MobX) 中无效

如何解决加载状态在 React 应用程序 (MobX) 中无效

我正在编写一个从 wordpress REST API 获取数据的 React 应用程序。到目前为止一切正常，但是，加载指示器没有显示。我使用 MobX 进行状态管理。我有一个 loadingInitial 可观察对象。每当我开始我的动作时，我都会将此 observable 设置为 true 以进入加载状态。在操作完成必要的操作后，我将 loadingInitial 重置为 false。所以我希望在获取帖子时看到加载屏幕。但是我在加载 daha 时看到空白页。

这是操作的代码：

    @action loadAnecdotes = async (page: number,year: number,order: string) => {
        this.loadingInitial = true
        try {
            const anecdotesHeaders = year === 0 ? await agent.AnecdotesHeaders.list() : await agent.AnecdotesHeaders.listByYear(year)
            const maxPages = anecdotesHeaders['x-wp-totalpages']
            
            if (page <= maxPages) {
                const anecdotes = year === 0 ? await agent.Anecdotes.list(page,order) : await agent.Anecdotes.listByYear(page,year,order)
                runInAction(() => {
                    this.anecdoteArray = []
                    anecdotes.forEach((anecdote,i) => {
                        this.anecdoteArray[i] = anecdote
                    })
                    this.loadingInitial = false
                })
            } else {
                runInAction(() => {
                    this.loadingInitial = false
                })
            }
            return {anecdoteArray: this.anecdoteArray,maxPages}
        } catch (error) {
            console.log(error)
            this.loadingInitial = false
        }
    }

这是我获取帖子的组件中的 useEffect：

    useEffect(() => {
        loadAnecdotes(page,order).then(result => {
            if (page <= result?.maxPages)
                setArray(a => [...a,...result?.anecdoteArray!])
            setLoaded(true)
        })
    },[loadAnecdotes,page,order,setLoaded,setArray])

这是我在返回帖子之前调用的内容：

if (loadingInitial) return <LoadingComponent content='Anecdotes loading...' />

附带说明，我的组件设置为观察者。

我可能做错了什么？

解决方法

好吧，单靠loadingInitial似乎还不够。我向它添加了第二个条件，posts 数组的长度。如果为 0，则显示加载组件。它奏效了！只是这个编辑解决了问题：

if (loadingInitial || !array.length) return <LoadingComponent content='Anecdotes loading...' />