Antd Tabs自定义TabPane时组件参数undefined问题求助

核心原因：React组件参数接收方式错误 #

React函数组件的入参是单个props对象，而非分散的多个独立参数。你当前的InfoPage组件写法会导致：

• 第一个参数modeInfo实际是整个props对象
• hierarchy和selectedTarget直接为undefined

修复代码 #

将InfoPage的参数改为解构props对象的写法：

// 错误写法
// const InfoPage = ( modeInfo, hierarchy, selectedTarget) => { ... }

// 正确写法
const InfoPage = ({ modeInfo, hierarchy, selectedTarget }) => {
    const renderTree = (hierarchy) => {
       if (Array.isArray(hierarchy)) {
         return hierarchy.map(({ key, children }) => {
           return renderTarget(key, children);
          });
       } else {
         console.error('hierarchy is not an array') 
         return [];
      }
    };

    const renderTarget = (key, checks) => {
      return {
        ...updatedInfo[selectedKey][key], // 注意此处Key改为小写key，避免未定义变量报错
        children: checks.map((check) => renderCheck(check.key, check.children)),
      };
    };

    return (
      <>
       <Card title={<Title/>} style={{ borderWidth: '2px', borderRadius: '10px' }}>
        <Tree
          checkable
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          checkedKeys={checkedKeys}
          selectedKeys={selectedKeys}
          multiple
          treeData={renderTree(hierarchy)}
          blockNode={true}
        />
      </Card>
      </>
    )
}

额外优化建议 #

给hierarchy添加默认空数组，避免极端情况下的报错：

const InfoPage = ({ modeInfo, hierarchy = [], selectedTarget }) => { ... }

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