如何按日期对组件进行排序 [ REACT ]

Question

我已经发布了我的react - firebase 项目，我想按日期对组件消息和图像进行排序。所以我通过 map() 显示它，它按组件按日期排序，但它是分开的。我需要它按日期进行聚合和排序。如有任何帮助，我们将不胜感激。在此处输入图像描述

组件 ChatWindow

           <ContentStyled>
            <MessageListStyled ref={messageListRef}>
              {messages.map((mes) => (
                <Message
                  key={mes.id}
                  text={mes.text}
                  photoURL={mes.photoURL}
                  displayName={mes.displayName}
                  createdAt={mes.createdAt}
                  files={mes.files}
                  nameFile={mes.nameFile}
                />
              ))}
              {images.map((image) => (
                <Image 
                key={image.id}
                files= {image.files}
                nameFile= {image.name}
                createdAt={image.createdAt}
                photoURL={image.photoURL}
                displayName={image.displayName}
                />
              ))}

              <div>
              { messagesss }
              {imagesss}
              {/* {mergeds} */}
              </div>

            </MessageListStyled>
            {/* from upload images */}
            <FormImage>
              <form onSubmit={formHandler} className="form-image" >
                <div class="file-input">
                  <input
                    type="file"
                    name="file-input"
                    id="file-input"
                    class="file-input__input"
                  />
                  <label class="file-input__label" for="file-input">
                  <FileImageOutlined />
                  </label>
                  <button type="submit"><UploadOutlined /></button>
                </div>
              </form>
              {/* from upload messages */}
              <FormStyled style={{width: "96%"}} form={form}>
                <Form.Item name='message'>
                  <TextArea
                    ref={inputRef}
                    onChange={handleInputChange}
                    onSubmit={handleOnSubmit}
                    // onPressEnter={handleOnSubmit} 
                    placeholder='Nhập tin nhắn...'
                    bordered={false}
                    autoComplete='off'
                    autoSize={{ minRows: 1, maxRows: 4 }}
                  />
                </Form.Item>
                <Button type='primary'onClick={handleOnSubmit} style={{background: "#36393F", border: "none", fontSize: "1.2rem", marginBottom: "12px"}} >
                  <SendOutlined />
                </Button>
              </FormStyled>
            </FormImage>
          </ContentStyled>

组件消息

     <WrapperStyled className='hover'>
      <div>
        <Avatar size='small' src={photoURL}>
          {photoURL ? '' : displayName?.charAt(0)?.toUpperCase()}
        </Avatar>
        <Typography.Text className='author'>{displayName} 
      </Typography.Text>
        <Typography.Text className='date'>
          {formatDate(createdAt?.seconds)}
        </Typography.Text>
      </div>
      <div>
          <Typography.Text className='content'>{text} 
          </Typography.Text>
      </div>
    </WrapperStyled>

组件图像

    <WrapperStyled className='hover'>
      <div>
        <Avatar size='small' src={photoURL}>
          {photoURL ? '' : displayName?.charAt(0)?.toUpperCase()}
        </Avatar>
        <Typography.Text className='author'>{displayName}</Typography.Text>
        <Typography.Text className='date'>
          {formatDate(createdAt?.seconds)}
        </Typography.Text>
      </div>
      <div>
        {/* <Typography.Text className='content'>{text}</Typography.Text> */}
        <img src={files} alt={nameFile} className='content' />
      </div>
    </WrapperStyled>

Answer 1

哦，我认为解决方案。我将它们分组为一个数组，然后使用Concat（）合并它们。网络使用sort（）进行排序。让我收到有关上述解决方案的闪电。全部。

const toArr = [(messages.map((mes) => ( // Group 2 component
    <Message
      key={mes.id}
      text={mes.text}
      photoURL={mes.photoURL}
      displayName={mes.displayName}
      createdAt={mes.createdAt}
      files={mes.files}
      nameFile={mes.nameFile}
    />
  )))
  ,
  (images.map((image) => (
    <Image 
    key={image.id}
    files= {image.files}
    nameFile= {image.name}
    createdAt={image.createdAt}
    photoURL={image.photoURL}
    displayName={image.displayName}
    />
  )))]

  const mergeds = toArr[0].concat(toArr[1]); //merge them
  const sortCreatedAt = mergeds.sort((a, b) => a.props.createdAt - b.props.createdAt); //Sort by createdAt