Javascript 在渲染中显示数组的内容

我正在使用MERN stack和Redux。我已经在状态“comments”中创建了一个数组，该数组通过clickHandler函数使用全局状态的元素进行更新（通过props访问）。当我试图在渲染中显示数组的内容时，我只得到它的长度。如何显示元素的属性，例如title

import React, { Component } from "react";
import PropTypes from "prop-types";
import GoogleSearch from "./GoogleSearch";
import { connect } from "react-redux";
import { fetchSubjects } from "../../actions/subject";
import { fetchComments } from "../../actions/comment";
import store from "../../store";

class Subject extends Component {
  // on loading the subjects and comments
  // are fetched from the database
  componentDidMount() {
    this.props.fetchSubjects();
    this.props.fetchComments();
  }

  constructor(props) {
    super(props);
    this.state = {
      // set inital state for subjects description
      // and summary to invisible
      viewDesription: -1,
      viewSummary: -1,
      comments: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    // new subject and comments are added to the top
    if (nextProps.newPost) {
      this.props.subjects.unshift(nextProps.newPost);
    }
    if (nextProps.newPost) {
      this.props.comments.unshift(nextProps.newPost);
    }
  }

  clickHandler = (id) => {
    // when a subject title is clicked pass in its id
    // and make the desciption visible
    const { viewDescription } = this.state;
    this.setState({ viewDescription: viewDescription === id ? -1 : id });
    // clear the existing comments in state
    this.setState({
      comments: [],
    });
    // loop through the comment items in the global state
    // and add any with the same subjects id passed in to the array
    var i;
    for (i = 0; i < this.props.comments.length; i++) {
      if (this.props.comments[i].subject == id) {
        console.log(this.props.comments[i]);
        this.setState({
          comments: this.state.comments.unshift(this.props.comments[i]),
        });
      }
    } // set local storage to the id for the subject that has been clicked
    localStorage.setItem("passedSubject", id);
  };

  // hovering on and off subjects toggles the visibility of the summary
  hoverHandler = (id) => {
    this.setState({ viewSummary: id });
  };
  hoverOffHandler = () => {
    this.setState({ viewSummary: -1 });
  };

  render() {
    const subjectItems = this.props.subjects.map((subject) => {
      // if the state equals the id set to visible if not set to invisible
      var view = this.state.viewDescription === subject._id ? "" : "none";
      var hover = this.state.viewSummary === subject._id ? "" : "none";
      var comments = this.state.comments;
      return (
        <div key={subject._id}>
          <div
            className="subjectTitle"
            onClick={() => this.clickHandler(subject._id)}
            onMouseEnter={() => this.hoverHandler(subject._id)}
            onMouseLeave={() => this.hoverOffHandler()}
          >
            <p className="title">{subject.title}</p>
            <p className="rating">Rating: {subject.rating}</p>
            <p className="summary" style={{ display: hover }}>
              {subject.summary}
            </p>
          </div>

          <div className="subjectBody " style={{ display: view }}>
            <div className="subjectAuthor">
              <p className="author">
                Subject created by: {subject.author} on {subject.date}
              </p>
              <a href="">
                <div className="buttonRateSubject">RATE SUBJECT</div>
              </a>
            </div>

            <div className="subjectDescription">
              <p className="description">{subject.description}</p>
            </div>

            <div className="subjectLinks">Links:</div>

            <div className="subjectComments">
              <p>Comments:</p>
              {/* ************HERE*********** */}
              <p>{comments}</p>
              {/* ********************************* */}
              <a href="/addcomment">
                <div className="buttonAddComment">ADD COMMENT</div>
              </a>
            </div>
          </div>
        </div>
      );
    });

    return (
      <div id="Subject">
        <GoogleSearch />
        {subjectItems}
      </div>
    );
  }
}

Subject.propTypes = {
  fetchSubjects: PropTypes.func.isRequired,
  fetchComments: PropTypes.func.isRequired,
  subjects: PropTypes.array.isRequired,
  comments: PropTypes.array.isRequired,
  newPost: PropTypes.object,
};

const mapStateToProps = (state) => ({
  subjects: state.subjects.items,
  newSubject: state.subjects.item,
  comments: state.comments.items,
  newComment: state.comments.item,
});

// export default Subject;
export default connect(mapStateToProps, { fetchSubjects, fetchComments })(
  Subject,
  Comment
);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“/GoogleSearch”导入GoogleSearch；
从“react redux”导入{connect}；
从“../../actions/subject”导入{fetchSubjects}”；
从“../../actions/comment”导入{fetchComments}；
从“../../store”导入存储；
类主题扩展组件{
//关于加载主题和注释
//是从数据库中提取的
componentDidMount（）{
this.props.fetchSubjects（）；
this.props.fetchComments（）；
}
建造师（道具）{
超级（道具）；
此.state={
//设置主题描述的初始状态
//并对其进行了总结
视图描述：-1，
视图摘要：-1，
评论：[]，
};
}
组件将接收道具（下一步）{
//新主题和评论添加到顶部
如果（nextrops.newPost）{
this.props.subjects.unshift（nextrops.newPost）；
}
如果（nextrops.newPost）{
this.props.comments.unshift（nextrops.newPost）；
}
}
clickHandler=（id）=>{
//单击主题标题时，传入其id
//并使描述可见
const{viewsdescription}=this.state；
this.setState（{viewscription:viewscription==id？-1:id}）；
//清除状态中的现有注释
这是我的国家({
评论：[]，
});
//循环遍历全局状态中的注释项
//并将任何具有传入数组的相同主题id的对象添加到数组中
var i；
对于（i=0；i{
this.setState（{viewSummary:id}）；
};
hoverOffHandler=（）=>{
this.setState（{viewSummary:-1}）；
};
render（）{
const subjectItems=this.props.subjects.map（（subject）=>{
//如果状态等于设置为可见（如果未设置为不可见）的id
var view=this.state.viewsdescription==subject.\u id？“：“无”；
var hover=this.state.viewSummary==subject.\u id？“：“无”；
var注释=this.state.comments；
返回(
this.clickHandler（subject.\u id）}
onMouseCenter={（）=>this.hoverHandler（subject.\u id）}
onMouseLeave={（）=>this.hoverOffHandler（）}
>
{subject.title}
评级：{subject.rating}


{主题摘要}


主题创建人：{Subject.author}在{Subject.date}

{subject.description}
链接：
评论：

{/****************这里***************/}
{评论}

{/* ********************************* */}
);
});
返回(
{subjectItems}
);
}
}
Subject.propTypes={
fetchSubjects:PropTypes.func.isRequired，
fetchComments:PropTypes.func.isRequired，
主题：PropTypes.array.isRequired，
注释：需要PropTypes.array.isRequired，
newPost:PropTypes.object，
};
常量mapStateToProps=（状态）=>({
主题：state.subjects.items，
newSubject:state.subjects.item，
注释：state.comments.items，
新成员：state.comments.item，
});
//导出默认主题；
导出默认连接（MapStateTops，{fetchSubjects，fetchComments}）(
主题,，
评论
);

我想我知道你的问题。要渲染数组的项

让我给你一个简短的概述

Javascript:

this.setState({
  comments: data
});

render (){
  return (
    <div>
    { this.state.comments.map(c=> <div>{c.body}</div> ) }
    </div>
  )
}

this.setState({
评论：数据
});
渲染（）{
返回(
{this.state.comments.map（c=>{c.body}}
)
}

谢谢大家，我将clickHandler中的for循环改为现在具有数据呈现功能的for循环，由于某种原因，它不喜欢数组中的对象

 var temp = [];
    for (i = 0; i < this.props.comments.length; i++) {
      if (this.props.comments[i].subject == id) {
        console.log(this.props.comments[i]);
        temp.unshift(this.props.comments[i].comment);
        temp.unshift(this.props.comments[i].title);
    
      }
    }
    this.setState({
      comments: temp,
    });

var-temp=[]；
对于（i=0；i

您正在查找

数组.map

。它可以像

comments.map（（comment，i）=>{comment}）

只是得到一个错误。。。comments.map不是一个函数这里有一个例子，你可以运行它来看看它是否能满足你的需要：我不能让这两个都工作。如果在组件装载后加载了注释，则需要检查数组是否未定义，然后才能使用map。只要不尝试将对象直接用作react节点，对象就可以正常工作，我更新了我以前的示例，使用对象而不仅仅是字符串：谢谢，我将尝试将其合并到我的代码中，它提供了比我现有的更好的结果，并且更易于设置样式。谢谢ag