React实现嵌套字典转复选框嵌套列表的问题求助

问题 #

手里有个嵌套字典：{ "1" : [{"a" : ["p", "q"]}, "b", "c", {"d" : ["h", "w"]}] }，想用React生成带复选框的嵌套列表，碰到俩问题：

1. 递归调用TagTree组件直接报错，核心错误是*TypeError: this.props.tag.map is not a function*，同时提示“列表中的每个子元素都应该有唯一的'key'属性”
2. 需要先显示字典的键，再展示对应内容

问题原因 #

• map不是函数报错：递归传参时，有时候传递的是对象（比如{"a": ["p", "q"]}），但原组件直接对参数调用map方法，而对象本身没有map，自然报错
• key缺失警告：React要求列表内的每个子元素必须有唯一的key属性，用于优化DOM更新，原代码没加所以触发警告

修正后的代码 #

import React from "react";

class TagTree extends React.Component {
  renderItem(item) {
    // 处理字符串、数字这类普通值
    if (typeof item !== "object" || item === null) {
      return (
        <li key={item}>
          <input type="checkbox" />
          <span>{item}</span>
        </li>
      );
    }

    // 处理数组：遍历每个子元素递归渲染
    if (Array.isArray(item)) {
      return (
        <ul key={JSON.stringify(item)}>
          {item.map((subItem) => this.renderItem(subItem))}
        </ul>
      );
    }

    // 处理对象：先渲染键，再递归渲染对应的值
    return Object.entries(item).map(([key, value]) => (
      <li key={key}>
        <input type="checkbox" />
        <span>{key}</span>
        {this.renderItem(value)}
      </li>
    ));
  }

  render() {
    return <React.Fragment>{this.renderItem(this.props.tag)}</React.Fragment>;
  }
}

class TagApp extends React.Component {
  render() {
    return (
      <div>
        <TagTree tag={this.props.tagList} />
      </div>
    );
  }
}

export default TagApp;

代码说明 #

1. 分类型处理数据：新增renderItem方法，分别处理普通值、数组、对象三种类型，避免了对非数组调用map的错误
2. 对象显示逻辑：用Object.entries遍历对象，先渲染键再递归渲染对应值，满足“先显键再显内容”的需求
3. 补全唯一key：给每个列表项添加了唯一标识作为key，普通值用自身、数组用序列化字符串、对象用键，解决了key缺失的警告
4. 添加复选框：每个可选项前都加入了复选框，符合需求

效果示例 #

传入初始嵌套字典后，会渲染出如下结构：

• 1
  • a
    • p
    • q
  • b
  • c
  • d
    • h
    • w

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