如何通过firebase数据数组中的数组进行映射答案

【问题标题】：how to map through an array inside an array of firebase data如何通过firebase数据数组中的数组进行映射
【发布时间】：2020-08-24 11:24:26
【问题描述】：

This is exactly how the array looks Json data image

我想获取图像数据并将其呈现在我的反应组件中。我已经在地图函数中尝试了地图，但这不起作用。请看上图的数据结构更新：请看一下新照片

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>

这是我的渲染组件。请看一下

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

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

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

这对我有用

【讨论】：

【解决方案2】：

因为您的 images 值是 Object，而不是 Array。 Object 没有 map 方法。

您可以使用Object.entries 方法迭代对象：

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

Key 对于定义你的 react 组件的 key 属性很有用。如果您不关心密钥，您可以改用Object.values 方法：

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

更新，试试：

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

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

【讨论】：

我尝试按照上述步骤操作，但无法渲染并出现错误。你能写显示代码来显示图像对象内的图像变量吗？感谢回复
能否请您显示您的代码及其产生的错误。
我实际上尝试将它插入到上面的代码中，但它不起作用。上面的代码是指我作为渲染组件发布的主 div 类。您能告诉我如何在该渲染组件中使用您的代码吗？
我尝试了更新后的代码，但解析错误提示 JSX 值应该是表达式或引用的 JSX 文本
看起来你不能使用模板文字作为属性值。立即尝试。

【解决方案3】：

.map 仅适用于数组，而您有一个对象数组。使用 .map 进入主数组后，您需要在图像对象上使用对象迭代器（如 Object.entires()）访问图像。

【讨论】：

【解决方案4】：

图像似乎是一个对象而不是数组，你可以做的是遍历图像对象的键并获取每个键的值。

看起来像这样：

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

【讨论】：