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 对象

添加额外的 key-value 对（已删除：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>
    )}

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

React - components being overwritten when deleted from state (based on there index)

jsx

reactjs