React TypeScript：无法在 render() 中的其他 map() 中获取 map() 以工作

Question

我想在 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() 块 + 前面的逗号时，这个：

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

我收到了一级消息，但我无法让两者都正常工作。我还没有找到一个很好的例子，它必须如何构造才能起作用。

我需要更改什么？

Answer 1

<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>

React TypeScript：无法在 render() 中的其他 map() 中获取 map() 以工作

React TypeScript: Cannot get map() inside other map() in render() to work

javascript

typescript

reactjs

map-function

spfx