React项目TypeError: handleDeleteNode is not a Function错误排查与解决

错误原因 #

递归渲染Folder组件时，子Folder节点未被传递handleDeleteNode props，导致子组件中该函数为undefined，调用时触发TypeError: handleDeleteNode is not a Function。

修复步骤 #

在Folder组件遍历子节点渲染<Folder>的代码块中，补充传递handleDeleteNode props：

错误代码示例

// Folder.js 中递归渲染子节点的错误代码
{data.children.map(child => (
  <Folder key={child.id} data={child} />
))}

修复后代码示例

// Folder.js 中修复后的递归渲染代码
{data.children.map(child => (
  <Folder key={child.id} data={child} handleDeleteNode={handleDeleteNode} />
))}

说明 #

App.js中仅向根Folder组件传递了handleDeleteNode，但递归生成的子Folder组件没有继承该props，因此在子组件中调用该函数时会出现未定义的情况。补充传递后，所有层级的Folder组件都能获取到这个函数，即可正常调用。

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