react 循环两组数据展示页面

    <div className="desktop_balance_number"   style={{display:'none'}} >
                        {
                            titleData.map((item, index) => {
                                return (
                                    <div className="desktop_balance_top " key={index}>
                                        <div className={` desktop_balance_number_item   ${selectedColor == index ? 'active' : ''}     `} onClick={() => handleSelectFn(item, index)}>
                                            <div >
                                                <div className={` topall top_num${index}`}>
                                                    {item.number}
                                                </div>
                                                <div className={` bot_num   ${selectedColor == index ? 'numactive' : ''} `} >
                                                    {item.name}
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                )
                            })
                        }

                    </div>
                    <div className="desktop_balance_media" style={{display:'none'}} >
                        {
                            channel.map((item, index) => {
                                return (
                                    <div className="desktop_balance_media_item" key={index} onClick={() => handleChannel(index)}>
                                        <div className={`media_item_every  ${mediaColor == index ? 'mediaActive' : ''} `}>{item.val}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    
                    
                       <div className="desktop_balance__table" style={{ height: tableheightyejk,display:'none' }} >
                        <Table
                            columns={isFullscreen ? columnsbig : columnssmall}
                            dataSource={tabledata}
                            onChange={onChange}
                            scroll={{ y: scrollHeightyejk }} // 设置表格的滚动高度，需要根据实际情况调整
                            size="small"
                            pagination={false}
                            ref={scrollRef}
                           

                        />
                    </div>

 const [mediaColor, setMediaColor] = useState(0); // tab2选中背景色
    const [channel, setChannel] = useState<any>([]);// 默认tab2列表
        useUpdateEffect(() => {
const media_id = channel ? (channel[mediaColor] ? (channel[mediaColor]['key']) : "") : ""
     }, [mediaColor])
   const { loading: loading1, run: runNumber } = useRequest(GET_SERVICE_STGING_GETBALANCEMONITORING, {
        manual: true,
        onSuccess: (list: { error_code: number; data: any; msg: any }) => {
            if (list.error_code != 0) {
                return
            }
            setTitleData(list.data)
            setChannel(list.data[selectedColor].media) // tab1第一排获取tab2第二排的值
            setTableData([]) // 点击刷新时 重置表格
            setPage(1)
            if (list.data.length != 0) {
                const objList = {
                    "get_list": "1",
                    "type": list.data[0]['key'],
                    "media_id": list.data[selectedColor].media[0]['key'],
                    "order_key": order_key,
                    "order_type": order_type,
                    "page": 1
                }
                runList(
                    objList
                )
            }
        },
    })

    // 选中tab2 
    const handleChannel = (index: any) => {
        setMediaColor(index)
        setOrderType('')
        setOrderKey('')
        setTableData([])
        setIsClick(true)
        setPage(1)
        setIsFlag(true)
    };