React中console.log可打印返回数据但页面无法渲染展示的求助

• 变量作用域完全不对：你在useEffect回调内部定义的newArr是局部变量，它的可访问范围仅局限在这个副作用函数的代码块里，useEffect执行完变量就出作用域了，组件的JSX渲染逻辑根本拿不到这个值，哪怕控制台能正常打印数组，渲染层读不到自然出不来内容。
• 实际运行大概率藏着报错：JSX里直接引用没在组件顶层声明的newArr，会直接抛出newArr is not defined的引用错误，导致组件中断渲染，部分开发环境会隐藏这类报错，很容易被忽略。

• 把newArr的计算挪到组件顶层作用域，让整个组件上下文都能访问到这个合并后的数组，不要再只放在useEffect里计算：

// 组件顶层直接做数组合并，JSX可以直接引用
const newArr = [...messages, ...receiveMessages]

useEffect(() => {
  // 副作用里只留日志校验就行，不用重复声明newArr
  console.log("newArr", newArr)
  // 纯遍历打日志用forEach更合适，不需要用map生成新数组
  newArr.forEach(m => console.log(m.type, m.msg))
}, [messages, receiveMessages]);

// 渲染逻辑直接引用顶层的newArr
{ newArr?.length ? newArr.map((m, index) => {
    return <div key={index} style={{float :'right'}}>{m.msg}</div>
  })
  : null 
}

• 两个容易踩的细节坑补上：
  • 原来的渲染判断只看newArr存不存在，空数组也会满足渲染条件，改成判断数组长度大于0再输出，避免空列表占页面空间
  • 列表渲染必须给每个节点加唯一的key属性，不然React的Diff逻辑会出警告，长列表场景下容易出现渲染错位

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