Quiero renderizar mensajes y sus respuestas en React (con TypeScript).

Los mensajes se almacenan dentro de una matriz en el estado y las respuestas se almacenan dentro de una matriz diferente dentro del estado.

Este es mi código actual, lo que da como resultado que no se muestren los bloques de mensajes:

  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>
    );
  }

Cuando elimino el segundo bloque .map() + la coma justo antes, este:

                        ,
              topicReplies.filter(r => r.topicMessageId === topic.id).map((reply: ITopicReply, indexReply) => {
                return (
                  this.renderMessageBlock(reply.message, indexReply, true)
                )
              })

Recibo los mensajes de primer nivel, pero no puedo hacer que ambos funcionen. Todavía no he encontrado un buen ejemplo de cómo debe estructurarse esto para que funcione.

¿Qué necesito cambiar?

0
Patric 25 ago. 2020 a las 13:58

1 respuesta

La mejor respuesta
<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>

0
Liu Lei 25 ago. 2020 a las 13:08