javascript - 获取递归函数的深度 React.js/JavaScript

Question

我正在尝试解决一个 JavaScript/React.js 练习来练习递归函数，其中您有一个输入对象(可以有多个深度级别)并且您想要输出一个包含对象内容的“树”，如下所示:

//Input object
const input = {
  key1: {
    key11: 'v11',
  },    
  key2: {
    key21: {
      key211: 'v211',
    },
  },
  key3: 'v3',
}

/* Desired output:
key1:
--key11: v11
key2:
--key21:
----key211: v211
key3: v3
*/

我已经设法开发了进行递归调用的 App.jsx 组件:

class App extends React.Component {  
    renderObject(input, level=0){
    return (Object.entries(input).map((item, index) => {
      if(typeof item[1] === "string"){
        let object = <div key={`${item[0]}-level-${level}`}><span>{"--".repeat(level)}</span>{item[0]}: {item[1]}</div>;
        level = 0;
        return object;
      } else {
        let object = <div key={`${item[0]}-level-${level}`}><span>{"--".repeat(level)}</span>{item[0]}: { this.renderObject(item[1], ++level)}</div>
        return (object)
      }
    }))
  }
  
  render() {
    return (
      <div>
            {this.renderObject(input)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

我面临的问题是我实现的 level 没有显示真正的深度，因为它也在第一级的每次迭代中递增(当它应该保持为 0 时)。

/* Obtained output: 
key1:
--key11: v11
--key2:
----key21:
------key211: v211
----key3: v3
*/

我该如何解决这个问题？

Answer 1

将我的评论转换为答案，问题与改变 level 的值有关与 ++level和 level = 0在递归函数的主体中。查看打印结果，目标是每个级别都有相同的缩进，所以 ++level ，循环中同一级别的 future sibling 将以增加的距离缩进。 level = 0可能试图纠正这个问题，但它不起作用，因为一旦递归开始，级别不应该为 0。

解决方案是对待level在函数主体期间有效不可变，然后使用 level + 1作为将子递归调用设置为适当级别的参数。

代码如下:

class App extends React.Component {
  renderObject(o, level = 0) {
    return Object.entries(o).map(([k, v]) => (
      <div key={[k, v, level].join("-")}>
        <span>{"--".repeat(level)}</span>
        {k}:{" "}
        {typeof v === "object"
          ? this.renderObject(v, level + 1)
          : v}
      </div>
    ));
  }

  render() {
    return <div>{this.renderObject(this.props.tree)}</div>;
  }
}

const tree = {
  key1: {
    key11: "v11",
  },
  key2: {
    key21: {
      key211: "v211",
    },
  },
  key3: "v3",
};

ReactDOM.createRoot(document.querySelector("#app"))
  .render(<App tree={tree} />);

#app {
  font-family: monospace;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>