React -当从状态中删除组件时被覆盖(基于那里的索引)

Question

我很难在React中创建多个选项卡表单。示例图像：

​

​

每个新选项卡都挂载一个新组件。示例代码：

const handleAddTab = tabIndex => {
        const exampleTab = {
            name: `${Date.now()} / 16.02.2022 г.`,
            jsx: <Document />,
            deletable: true
        }

        const updatedTabs = state.tabs.map((t, i) => {
            if (tabIndex === i) t.subtabs.push(exampleTab)

            return t
        })

        setState(prev => ({
            ...prev,
            tabs: updatedTabs
        }))
    }

我正在渲染这些部件。示例代码：

{state.activeSubtabIndex === 0 ?
    <Documents />
    :
    getScreen().subtabs.map((s, i) =>
        i === 0 ?
            <>
            </>
            :
            <div
                style={state.activeSubtabIndex != i ? { display: 'none' } : {}}
            >
                {s.jsx}
            </div>

    )
}

我使用getScreen()获取当前选项卡并获取子选项卡。示例代码：

const getScreen = () => {
    const typeId = query.get('type_id')
    const screen = state.tabs.find(t => t.typeId == typeId)

    return screen
}

删除选项卡的方式如下：

const handleCloseTab = (tabIndex, subtabIndex) => {
    const updatedTabs = state.tabs.filter((t, i) => {
        if (tabIndex === i) {
            t.subtabs = t.subtabs.filter((ts, i) => {
                return subtabIndex != i
            })
        }

        return t
    })

    setState(prev => ({
        ...prev,
        tabs: updatedTabs
    }))
}

问题是，每次我删除(例如)第一个选项卡时，第二个选项卡从第一个选项卡中获取状态(基于映射的索引)。

Answer 1

我通过向exampleTab对象添加一个额外的键值对(删除: false)来解决这个问题。

const handleAddTab = tabIndex => {
    const exampleTab = {
        name: `${Date.now()} / 16.02.2022 г.`,
        jsx: <Document />,
        deletable: true,
        deleted: false <====
    }

    const updatedTabs = state.tabs.map((t, i) => {
        if (tabIndex === i) t.subtabs.push(exampleTab)

        return t
   

 })

    setState(prev => ({
        ...prev,
        tabs: updatedTabs
    }))
}

每当我关闭一个选项卡时，我都不会卸载它并从数组中删除它的数据。我只是简单地检查一下deleted === true，并将style={{ display: 'none' }}应用于选项卡和组件。示例代码：

{state.activeSubtabIndex === 0 ?
    <Documents />
    :
    getScreen().subtabs.map((s, i) =>
        i === 0 ?
            <>
            </>
            :
            <div
                style={state.activeSubtabIndex != i || s.deleted ? { display: 'none' } : {}}
                key={s.typeId}
            >
                {s.jsx}
            </div>
    )}