问题：怎么让组件数据自动更新？

需要实现效果：点击页面顶部标题栏，下方的组件列表刷新相关数据。

目前效果：点击顶部栏样式正常实现，接口正常连接且成功，但下方组件列表没有同步刷新，需要手动刷新两次才能正确实现效果。

当前效果截图：

当前页面代码（index.js）：

import React, { useEffect, memo, useState, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';


import {
    View,
    Text,
    Image, 
    navigateTo, 
    ScrollView,
    showLoading,
    hideLoading,
    createSelectorQuery, 
    showModal,
} from 'remax/wechat';
import { connect } from 'react-redux';
import { Popup } from 'annar';
import Nav from '@/components/nav'; 
import request from '@/utils/request';
import useSysInfo from '../../../hooks/sysInfo'
import useBackEvent from '@/hooks/navEvent'


import styles from './index.css';
import { getSysConf } from '../../../actions/common'; 
import HelpItem from '../../../components/helpItem';
import { usePageEvent } from '@remax/macro';


const HelptitleItem = memo(function HelptitleItem(props) {
    const { tab: { id, name }, current, callback } = props;
    const Cls = classnames(styles.question, {
        [styles.selectquestion]: id === current
    })
    return (
        <View className={styles.list}>
            <View id={'tab_' + id} className={Cls}
                onTap={() => {
                    callback(id)
                    console.log("HelptitleItem id:", id) 
                }}
            >
                <Text>{name}</Text>
                {id === current ? <View className={styles.greenline}></View> : null}
            </View>
        </View>
    )
})


HelptitleItem.propTypes = {
    tab: PropTypes.object.isRequired,
    callback: PropTypes.func.isRequired
}
 
const Help = function (props) {
    const [toView, setToView] = useState('')
    const [tabs, setTabs] = useState();  
    const { currentTab } = props;
    const [refreshTriggered, setRefreshTriggered] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const { getSysConf, sysConf, userInfo } = props; 
    const sysInfo = useSysInfo();
    const [hasData, setHasData] = useState(true); 
    const [List, setList] = useState();


    useEffect(() => {
        getSysConf()
    }, [])


    const {
        homeAction,
        backAction
    } = useBackEvent(currentTab);



    const [page, setPage] = useState(1);
    const [Id, setId] = useState(34); 


    const loadTabs = useCallback(() => {
        return request({
            url: '/getCatalogList',
            method: 'get',
            data: {
                type: 1
            },
            // cacheKey: tabs,
        })
    }, [])
    const loadList = useCallback((passPage) => { 
        return request({
            url: '/getArticleList',
            data: {
                // page: passPage ? passPage : page,
                // class_id: currentClassId,
                type: 1,
                catalog_id: Id
            },
        })
    }, [Id, page])
    const loadMore = useCallback(() => {
        if (hasData) {
            loadList().then(moreData => {
                setList(preList => preList.concat(moreData))
                setPage(prev => prev + 1);
                if (moreData.length < 10) {
                    setHasData(false);
                }
            })
        } else {
            showToast({
                title: '没有更多了~',
                icon: 'none'
            })
        }
    }, [Id, page, hasData])
 
    function showModal(data) { 
        wx.setStorageSync('title', data.title)
    }


    const init = useCallback(async () => {
        if (isLoading) return;
        const page = 1;
        setPage(page);
        setHasData(true);
        setIsLoading(true); 
        const List = await loadList(page);
        setIsLoading(false);
        setPage(prevPage => prevPage + 1); 
        setList(List);
        setRefreshTriggered(false)
        if ( List.length < 10) {
            setHasData(false);
        }
    }, [isLoading, page]); 


    useEffect(() => {
        init();
    }, [])


    useEffect(() => {
        if (isLoading) {
            showLoading({
                title: '加载中',
                mask: true
            })
        } else {
            hideLoading()
        }
    }, [isLoading])


    const changeClassId = useCallback((id) => {
        let index = tabs.findIndex(e => e.id === id);
        console.log(index, tabs)
        let scrollId = tabs[index - 2] ? tabs[index - 2].id : id;
        setToView('tab_' + scrollId)
        setId(id)
    }, [tabs])


    useEffect(() => {
        setIsLoading(true)
        loadTabs().then(res => {
            setIsLoading(false)
            setTabs(res)
            setId(res[0].id);
        }).catch(e => {
            setIsLoading(false)
        })
    }, []) 
 
    useEffect(() => {
        if (tabs) {
            const query = createSelectorQuery()
            query.select('#nav').boundingClientRect()
            query.exec(res => {
                // setNavHeight(res[0].height)
            })
        }


    }, [tabs])


    usePageEvent('onShareAppMessage', () => {
        return {
            path: 'packagePagesE/help/index/index',
        }
    })
    if (!tabs) return null; 


    return (
        sysConf &&
        <View className={styles.personal} onTap={() => { loadList() }} style={{ height: sysInfo.safeArea.bottom + 'PX' }}>
            <Nav
                title="帮助中心"
                goIndex={homeAction}
                onBack={backAction}
                showLeftFunc={true} /> 
            <View className={styles.tabs} >
                <ScrollView
                    className={styles.top}
                    scrollX
                    enableFlex
                    scrollIntoView={toView}
                    enhanced={true}
                    show-scrollbar={false}
                >
                    {
                        tabs.map(v => {
                            return (
                                <HelptitleItem
                                    tab={v}
                                    key={v.Id}
                                    current={Id}
                                    callback={changeClassId}
                                />
                            )
                        })
                    }
                </ScrollView>
            </View> 
            {
                (List && List.length > 0) ?
                    <ScrollView
                        className={styles.title}
                        scrollY
                        refresherEnabled
                        refresherTriggered={refreshTriggered}
                        lowerThreshold={60}
                        bindscrolltolower={loadMore}
                        bindrefresherrefresh={() => {
                            init();
                            setRefreshTriggered(true)
                        }}>
                        {
                            List.map((v, i) => {
                                return (
                                    <HelpItem key={i} {...v} showModal={() => { showModal(v) }} />
                                )
                            })
                        }
                    </ScrollView>
                    : null
            }  
        </View >
    ) 
}
const mapStateToProps = (state) => {
    const { sysConf, userInfo } = state.common;
    return {
        sysConf,
        userInfo
    }
}


const mapDispatchToProps = (dispatch) => {
    return {
        getSysConf: (conf) => {
            dispatch(getSysConf(conf))
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Help)