NextJS中调用自定义外部函数itmLoop无输出的问题求助

嘿，我来帮你排查下这个问题～你的代码里有几个小细节没处理好，导致itmLoop函数没输出内容：

• 函数未返回map的执行结果：你在itmLoop里用了arr.map遍历数组，但没有把这个map操作的结果return出去，函数默认会返回undefined，自然渲染不出任何东西。得把map的结果整个return出来才行。
• 参数拼写错误：你定义的数组变量是items，但调用itmLoop的时候传的是itms，这明显是笔误，导致函数拿到的是undefined，map也没法正常执行。
• React元素包裹问题：map返回的是多个<span>元素组成的数组，React要求组件的返回值要么是单个元素，要么用Fragment（<>...</>）包裹起来，不然会触发渲染报错。

给你修正后的代码：

const Output = () => {
  const items = [
    {
      title:"lvl1-1",
      children:[
        {title:"lvl2-1"},
        {title:"lvl2-2"}
      ]
    },
    {title:"lvl1-2"},
    {title:"lvl1-3"}
  ];

  function itmLoop(arr=[]){
    // 这里要return map的结果
    return arr.map((e, index)=>{
      // React遍历元素时需要加唯一key属性
      return (<span key={index}>{e.title}</span>)
    })
  }

  // 修正参数拼写，用Fragment包裹返回的元素数组
  return (<>{itmLoop(items)}</>)
}

export default Output

另外，你提到之后要改成递归处理children，那可以在itmLoop里判断当前元素有没有children，如果有就递归调用自己，示例如下：

function itmLoop(arr=[]){
  return arr.map((e, index)=>{
    return (
      <div key={index}>
        <span>{e.title}</span>
        {/* 如果有children就递归渲染子元素 */}
        {e.children && itmLoop(e.children)}
      </div>
    )
  })
}

这样就能处理多层嵌套的children结构啦～

备注：内容来源于stack exchange，提问作者Ash