как сопоставить массив внутри массива данных firebase

Question

Именно так выглядит массив Json изображение данных

Я хочу получить данные изображений и отобразить их в моем реагирующем компоненте. Я пробовал карту внутри функции карты, но это не сработало. Пожалуйста, взгляните на изображение выше для структуры данных. ОБНОВЛЕНИЕ: Пожалуйста, взгляните на новую фотографию

tickets.map((ticket) => (
      <div
        key={ticket.id}
        className="col-md-auto col-lg-12"
        id="card-width-min"
        style={{ color: "white" }}
      >
        <Card
          style={{ minWidth: "18rem", margin: "10px" }}
          key={ticket.id}
          bg={this.getRandomColor()}
        >
          <Card.Body>
            <Card.Title id="font-size-card">{ticket.name}</Card.Title>
            <Card.Subtitle className="mb-2 ">
              <strong>Subject: </strong>
              {ticket.subject}
            </Card.Subtitle>
            <Card.Subtitle className="mb-2 ">
              <strong>Category: </strong>
              {ticket.category}
            </Card.Subtitle>
            <Card.Subtitle className="mb-2 ">
              <strong>Status: </strong>
              {ticket.status}
            </Card.Subtitle>
            <Card.Text>{ticket.details}</Card.Text>

            <Button
              variant="outline-light"
              onClick={() => this.setState({ postId: ticket.id, modal: true })}
            >
              Upload file
            </Button>
            <FileModal
              modal={this.state.modal}
              closeModal={this.closeModal}
              uploadFile={this.uploadFile}
            />
            <ProgressBar
              uploadState={this.state.uploadState}
              percentUploaded={this.state.percentUploaded}
            />
          </Card.Body>
          <Card.Footer>
            <small className="text-muted" id="whiteColor">
              Posted {moment(ticket.timestamp).fromNow()}
            </small>
          </Card.Footer>
        </Card>
      </div>

это мой компонент рендеринга. Пожалуйста, посмотрите

Answer 1

{Object.entries(ticket.images).map(([key, image]) => {
          const imageKey = `image-${key}`;
          console.log(imageKey, image);

          return <div key={imageKey}>File: {image.image}</div>;
        })}

Это сработало для меня

Answer 2

.map будет работать только для массивов, пока у вас есть массив объектов. После того, как вы go вошли в основной массив с помощью .map, вам необходимо получить доступ к изображениям с помощью итератора объекта, такого как Object.entires () на объекте изображений.

Answer 3

Потому что ваше значение images - это Object, а не Array. Object не имеет метода map.

Вы можете перебирать объект, используя метод Object.entries:

Object.entries(ticket.images).map([key, image] => { 
    // return whatever
});

Key может быть полезен для определения ключевого свойства вашего компонента реакции. Если вам не нужен ключ, вы можете вместо этого использовать метод Object.values:

Object.values(ticket.images).map(image => {
   // return whatever
})

Upd, попробуйте:

{
    Object.entries(ticket.images).map(([key, image]) => {
        const imageKey = `image-${key}`;

        return (
            <div key={ imageKey }>
                Image key: { key }
            </div>
        );
    })
}

Answer 4

Изображения кажутся объектом, а не массивом, вы можете сделать l oop через ключи объекта images и получить значение каждого ключа.

Выглядит примерно так:

Object.keys(images).forEach(key => images[key])