在 React 中使用 map 时，如何将 go 转换为以前的版本？

Question

我有一个简单的数据 object 这是...

{
    "data": [
        {
            "name": "#1 First level",
            "children": [
                {
                    "name": "#1 Second level",
                    "children": [
                        {
                            "name": "#1 Third level"
                        }
                    ]
                }
            ]
        },
        ... other items (#2)...
    ]
}

我的目标是创建动态项目，您可以浏览以显示单击项目的相关数据。 当 object 有子节点时，它将是可点击的，当您点击它时，它将更新currentLevel state 以显示新数据。

我这样做：

const [currentLevel, setCurrentLevel] = useState([])

const levelHandleClick = (level) => {
    if (!level.children) return null

    setCurrentLevel(level.children)
    console.log('clicked level:', level)
}

当前级别currentLevel默认为空 object。 在这种情况下，我将currentLevel的 state 设置为我的导入数据 object。 这将显示所有第一级。

if (!currentLevel || currentLevel.length === 0) {
    setCurrentLevel(levelData) // my imported data object
}

现在我返回数据，我通过映射currentLevel来做到这一点，它是有意的。

{currentLevel.map((level, index) => {
    return (
        <button onClick={() => levelHandleClick(level)} key={index}>
            {level.name}
            {level.children && (
                <span>has children</span>
            )}
        </button>
    )
})}

我的问题是我想要一个“后退/上一个” function 让你回到一个级别。 我对如何做到这一点感到困惑。 有任何想法吗？

示例：我在#1 第三级，我想 go 回到 #1 第二级。

谢谢！