React中如何正确访问嵌套JSON的question属性并渲染到前端

你当前代码拿不到目标字段有三个核心问题：

• 属性访问层级错误：先理清楚给定JSON的结构层级：
  • 最外层根节点下的user是对象类型
  • user对象下的questionsz是数组类型，必须通过索引才能访问数组内的元素
  • 数组的单个元素对象上，才存储了你需要的question字段
    取第一道题内容的正确取值路径为：user.questionsz[0].question
• 组件入参接收错误：React组件的入参默认是所有props组成的包裹对象，你直接写(user)作为参数的话，拿到的其实是整个props对象，不是你传入的user数据本身。
• 富文本渲染逻辑缺失：目标question字段的值是带HTML标签的字符串，直接用{变量}插值会把<b>、<p>这类标签当普通文本展示，不会解析成加粗、段落等富文本效果。

可直接复用的代码示例 #

场景1：只渲染第一道题 #

给字段加可选链判空，避免接口数据未返回、字段缺失时出现undefined报错导致页面白屏：

// 注意：React组件名必须首字母大写，否则JSX会把它识别为原生HTML标签
const Index = (props) => {
  // 可选链做兜底，数据不存在时默认返回空字符串
  const questionContent = props.user?.questionsz?.[0]?.question || '';
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: questionContent }} />
    </div>
  )
}

场景2：渲染questionsz数组下的所有题目 #

通过数组map方法遍历渲染即可，记得给遍历项加唯一key值提升渲染性能：

const Index = (props) => {
  const questionList = props.user?.questionsz || [];
  return (
    <div>
      {questionList.map(item => (
        <div key={item._id} className="question-card">
          <div dangerouslySetInnerHTML={{ __html: item.question }} />
        </div>
      ))}
    </div>
  )
}

注意事项 #

• 用dangerouslySetInnerHTML渲染HTML内容时，确保数据源是自身可控的接口返回内容，不要直接渲染未经过滤的用户提交内容，避免XSS安全风险。
• 如果你习惯用解构方式接收props，可以把组件参数写成const Index = ({ user }) => { ... }，这种写法下组件内可以直接用user.questionsz[0].question访问目标字段。

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