React TypeScript：无法使render中其他map内的map正常工作

问题描述

我想在React中使用TypeScript呈现消息及其回复。

消息存储在该状态下的一个数组内，而答复存储在该状态下的另一个数组内。

这是我当前的代码，导致未渲染消息块：

  public render(): React.ReactElement<ispfxConversationsprops> {

    const { channelTopics,topicReplies,errorMessage } = this.state;

    const hideTitleContainer = this.props.isEditMode || this.props.title ? '' : styles.hidden;
    const wpTitleClasses = `${styles.webpartHeader} ${hideTitleContainer}`;

    return (
      <div className={ styles.spfxTecanTeamsConversations }>
        <div className={ styles.container }>
          <div className={ wpTitleClasses }>
            { this.props.isEditMode && <textarea onChange={this.setTitle.bind(this)} className={styles["edit"]} placeholder={strings.WebpartTitlePlaceholder} aria-label={strings.WebpartTitlePlaceholder} defaultValue={this.props.title}></textarea> }
            { !this.props.isEditMode && <span className={styles["view"]}>{this.props.title}</span> }
          </div>
          { errorMessage ? <p className={ styles.textError }>{errorMessage}</p> : null }
          <div className={ styles.conversationsArea }>
            {
              channelTopics.map((topic: IChannelTopic,indexTopic) => {
                return (
                  this.renderMessageBlock( topic.message,indexTopic),topicReplies.filter(r => r.topicmessageId === topic.id).map((reply: ITopicReply,indexReply) => {
                    return (
                      this.renderMessageBlock(reply.message,indexReply,true)
                    )
                  })
                )
              })
            }
          </div>
        </div>
      </div>
    );
  }

  public renderMessageBlock(message: IChannelMessage,index: Number,isReply: boolean = false) {
    const replyStyle = isReply? '' : styles.messageReply;
    const messageBlockClasses = `${styles.messageBlock} ${replyStyle}`;
    return (
      <div className={ messageBlockClasses} key={`teams-message-${message.id}-${index}`}>
        <div className={ styles.messageHeader}>
          <span className={ styles.messageAuthor }>
            { message.fromUserdisplayName ? message.fromUserdisplayName : strings.UnkNownAccount }
          </span>
          <span className={ styles.messageDate }>
          { this.renderDate(message.createdDateTime) }
          </span>
        </div>
        <div className={ styles.messageBody }>
          { message.deletedDateTime === null ? (message.contentType === 'html' ? renderHTML(message.content) : message.content) : this.renderDate(message.deletedDateTime) }
        </div>
      </div>
    );
  }

  public renderDate(date: Date) {
    return (
      <div className={ styles.inlineBlock }>
        <Moment format="d.M.yyyy">{date}</Moment> <Moment format="HH:mm:ss">{date}</Moment>
      </div>
    );
  }

当我删除第二个.map()块+前面的逗号时，这个：

,indexReply) => {
                return (
                  this.renderMessageBlock(reply.message,true)
                )
              })

我收到第一级消息，但是我不能同时工作。我还没有找到一个很好的示例，说明如何对其进行结构化才能使其起作用。

我需要更改什么？

解决方法

<div className={styles.conversationsArea}>
  {/* The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand **/
   channelTopics.map((topic: IChannelTopic,indexTopic) => {
    return [
      this.renderMessageBlock(topic.message,indexTopic),topicReplies
        .filter((r) => r.topicMessageId === topic.id)
        .map((reply: ITopicReply,indexReply) => {
          return this.renderMessageBlock(reply.message,indexReply,true);
        })
    ]
  })}
</div>