React组件props.data控制台可打印但应用界面无渲染显示

按以下优先级排查即可解决「props.data可正常打印但界面无渲染」的问题：

• 为列表节点补充唯一key属性
  当前代码里map返回的<li>节点没有设置React要求的唯一标识，React的Diff算法无法识别无key的列表节点，会直接跳过该部分节点的DOM挂载流程。修正时从数组元素中选取不重复的唯一字段作为key，替换原有逻辑：

  const newvar = props.data.map((item) => {
    // 选用题目id作为key，禁止使用数组索引作为key避免后续渲染异常
    return <li key={item.id}>{item.question_text}</li>
  })
  

• 为map操作增加空值兜底校验
  控制台能打印出props.data不代表组件执行DOM渲染阶段时，props.data已经是合法数组。如果父组件是异步加载数据后再传值，组件首次渲染时props.data可能是null/undefined空值，直接调用map会触发渲染报错中断整个渲染流程。增加判断逻辑避免空值异常：

  // 先校验props.data为合法数组再执行map，空值时返回null占位
  const newvar = Array.isArray(props.data) ? props.data.map((item) => {
    return <li key={item.id}>{item.question_text}</li>
  }) : null
  

• 修正列表节点的HTML嵌套结构
  原生HTML规范要求<li>节点必须作为<ul>或<ol>的子元素存在，如果直接把生成的li节点放在普通div下，部分浏览器会默认给无父级列表的li设置高度为0的样式，视觉上就表现为内容未渲染。修正嵌套结构即可：

  return (
    <div>
      <div>
        <h2>Question And Answers...</h2>
        <ul>
          {newvar}
        </ul>
      </div>
    </div>
  )
  

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