React报错：currentNodeIdUpdate不是函数，但该函数已定义且可在其他组件正常使用的问题排查

嘿，我一眼就瞅到问题所在了——你在TreeNode组件的递归渲染环节漏掉传递关键的回调props了！这才导致Tree组件里的currentNodeIdUpdate变成undefined，触发“不是函数”的报错。

错误根源 #

看TreeNode组件里这段递归渲染子Tree的代码：

<Tree treeData={node.children} />

你只传递了treeData，但没有把上层传下来的updateSelectedNodeId回调函数继续传递给子Tree组件。当递归生成的子Tree组件试图调用currentNodeIdUpdate(nodeId)时，这个props根本不存在（值为undefined），自然会抛出“不是函数”的错误。

修复步骤 #

只需要在TreeNode的递归Tree组件里补上currentNodeIdUpdate props就行：

<Tree treeData={node.children} currentNodeIdUpdate={updateSelectedNodeId} />

额外优化建议 #

为了避免这类“props未传递导致undefined”的问题，你可以给Tree组件的props设置默认值，这样就算不小心漏传，也不会直接崩溃，方便调试：

export const Tree = ({ treeData, currentNodeIdUpdate = () => {} }) => {
  // 原有代码保持不变
}

修复后流程验证 #

修复后，整个回调链就完整了：

1. TreeList定义updateOfSelectedNode并传给Tree
2. Tree包装成updateSelectedNodeHandler传给TreeNode
3. TreeNode点击节点时调用updateSelectedNode，触发上层的updateSelectedNodeHandler
4. 递归渲染的子Tree也能拿到回调，深层节点的点击也能一路传递回TreeList

这样就能实现你想要的“点击TreeNode把节点ID传回TreeList”的功能啦！

内容的提问来源于stack exchange，提问作者AlbCoder