如何在React JS中展示数组数据并渲染到HTML的P标签内

问题根因 #

你之前的写法无法生效是因为 this.state.data 是包含多条问卷数据的数组，不是单个对象，无法直接通过 .question 读取属性值。需要遍历数组，逐个取出每一项的question字段渲染。

正确实现代码（类组件） #

render() {
  return (
    <div>
      {/* 遍历data数组，为每个问题生成独立的p标签 */}
      {this.state.data.map(questionItem => (
        <p key={questionItem.idsurveyquestion}>
          {questionItem.question}
        </p>
      ))}
    </div>
  )
}

注意事项 #

• 遍历生成的列表元素必须添加唯一key属性，直接使用数据里的idsurveyquestion作为key即可，符合React的渲染规则。
• 初始化state时要给data设置默认空数组，避免接口请求完成前数组未定义、调用map方法报错：

constructor(props) {
  super(props);
  this.state = {
    data: [] // 初始化为空数组
  }
}

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