React.js 功能组件花括号内容无法渲染？historyStack逻辑未执行

核心Bug定位 #

你写的历史栈列表渲染逻辑存在关键语法错误：
map方法的回调函数如果用花括号包裹函数体，必须显式添加return语句才能返回待渲染的JSX；如果省略return，函数会默认返回undefined，最终整个map结果都是无效节点，React自然不会渲染任何内容，这就是你观察到“花括号包裹内容不渲染、内部逻辑不执行”的直接原因。

问题代码片段：

{        
  historyStack && historyStack.map((item, key) => {
    <p key={key}>{`${item.label}   -->`}</p>
  })
}

修复可二选一：

• 给回调函数补充显式return
• 把包裹函数体的花括号替换为圆括号，实现隐式返回

修复后的代码示例：

// 写法1：显式返回
{        
  historyStack.map((item, key) => {
    return <p key={key}>{`${item.label}   -->`}</p>
  })
}

// 写法2：隐式返回，更简洁
{        
  historyStack.map((item, key) => (
    <p key={key}>{`${item.label}   -->`}</p>
  ))
}

其他潜在优化点 #

• 冗余的短路判断：原代码里的historyStack && historyStack.map(...)没有实际兜底作用，空数组本身是布尔真值，不会触发短路。如果需要仅在历史栈非空时渲染列表，直接判断historyStack.length > 0即可。
• 状态更新的闭包隐患：当前所有修改historyStack的逻辑，都直接依赖组件渲染时闭包捕获的旧状态值，在高频点击、并发更新场景下可能出现状态覆盖的异常，建议替换为函数式更新写法，拿到最新的状态值做计算：

  // 追加历史条目逻辑
  const handleClick = (item) => {
    setHistoryStack(prevStack => prevStack.concat(item))
  }
  
  // 返回弹出栈顶逻辑
  const handleBack = () => {
    setHistoryStack(prevStack => {
      const newStack = [...prevStack]
      newStack.pop()
      return newStack
    })
  }
  

• key值使用不当：当前直接把数组索引作为列表的key属性，在历史栈会弹出尾部元素的动态场景下，会导致React错误复用DOM，出现渲染错乱，建议给每个历史条目增加唯一标识作为key使用。

内容的提问来源于stack exchange，提问作者El Fuerst