我想在一个轮播中呈现所有图像的动态列表答案

【问题标题】：I want to render a dynamic list of images all of them inside one carousel我想在一个轮播中呈现所有图像的动态列表
【发布时间】：2020-06-11 20:08:03
【问题描述】：

你好堆栈溢出社区，提前感谢您的帮助我是一个相当新的反应本地人。对于这个项目，我已经导入了库 nuka-carousel。所以我想做的是获取一个动态的图像列表并将它们放入一个轮播对象中。我不确定 1 如何获取数据和 2 如何有一个循环将它们全部放入同一个对象中。现在我已经将它设置为接受静态输入，但我希望它是动态的。

这是图像列表数据的样子

[{"id":4,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":4,"record":{"id":4,"c_dzp64j57b0pm6b8clmddapump":"test4","created_at":"2020-06-11T18:16:36.443Z","updated_at":"2020-06-11T18:16:36.443Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"68ca15c0503a7bc6850d9e8f52d2e3a4302b75a00d6b6b48b759980f02f4ee56.gif","size":13473,"width":300,"height":300,"filename":"file.gif"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":4}}}},{"id":3,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":3,"record":{"id":3,"c_dzp64j57b0pm6b8clmddapump":"test1","created_at":"2020-06-11T16:29:14.713Z","updated_at":"2020-06-11T18:15:24.949Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"19cb397219e0e95d9a0ebc42de7d6012a9b5965b5eca112ef37f0ff374642c01.jpg","size":5557,"width":275,"height":183,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":3}}}},{"id":2,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":2,"record":{"id":2,"c_dzp64j57b0pm6b8clmddapump":"test2","created_at":"2020-06-11T16:29:04.801Z","updated_at":"2020-06-11T18:15:07.995Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"75dcb52136d892cf5fad9637f650231fae1f33599739a99678517bf959a07ae9.jpg","size":7595,"width":284,"height":177,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":2}}}},{"id":1,"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":1,"record":{"id":1,"c_dzp64j57b0pm6b8clmddapump":"test3","created_at":"2020-06-11T16:28:59.989Z","updated_at":"2020-06-11T18:15:15.956Z","c_55pk7oxu728xufdeh6st6fplh":{"url":"ec4bdfcb37766426fe5f22ee521556131233480f877f13c4c3716dca7c6a5d2b.jpg","size":5503,"width":168,"height":300,"filename":"file.jpg"},"_meta":{"datasourceId":"97578cbb11844a92914b7ed8eb174929","tableId":"t_0sspte5yfnottg3npjqxbf7k5","id":1}}}}]

我希望能够将此数据中的网址放入轮播中。这是我现在拥有的代码，它目前是硬编码的。图像列表称为图像

返回（

                    <Carousel renderCenterLeftControls={false} renderCenterRightControls={false} renderCenterLeftControls={({ previousSlide }) => (
                        <button onClick={previousSlide}> <Icon name={button.Previcon} size={28} color={button.Prevcolor} /> </button>

                    )}   renderCenterRightControls={({ nextSlide }) => (
                        <button onClick={nextSlide}> <Icon name={button.Nexticon} size={28} color={button.Nextcolor} /> </button>



                    )}   defaultControlsConfig={{
            pagingDotsStyle: {
                fill: Indicator.Secondarypcolor,

            }
            }} >





                            <img src="https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg?format=1500w" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />
                            <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />
                        </Carousel>
                )

所有轮播的东西都有效，但我需要能够将这些网址放在轮播中，但是当我尝试在标签内放置一个循环时，它会中断。

【问题讨论】：

标签： javascript react-native carousel dynamic-list image-rendering

【解决方案1】：

如果我理解正确，您想映射数组并返回图像。我会这样做：

arr.map((el) => <img alt='' src={el.url} />);

【讨论】：

您好 Moshe，感谢您的回复。所以我正在构建一个轮播对象，在该对象内部，我可以在轮播标签内放置多个 img 标签，我希望能够通过一组 img 标签循环并将它们全部放在轮播标签内。我试着把 image.map((el) => );在轮播标签内，但它似乎崩溃了，我是否必须定义 el 以及我应该采取哪些其他步骤？谢谢

【解决方案2】：

从对象中正确使用 URL 键
网址必须是正确的链接
https://codesandbox.io/s/thirsty-gagarin-6isgf?fontsize=14&hidenavigation=1&theme=dark


import React from 'react';
import Carousel from 'nuka-carousel';

export default function App() {
  const images = [
    {
      id: 4,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 4,
        record: {
          id: 4,
          c_dzp64j57b0pm6b8clmddapump: 'test4',
          created_at: '2020-06-11T18:16:36.443Z',
          updated_at: '2020-06-11T18:16:36.443Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url: 'https://via.placeholder.com/400/ffffff/c0392b/&text=slide2',
            size: 13473,
            width: 300,
            height: 300,
            filename: 'file.gif',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 4,
          },
        },
      },
    },
    {
      id: 3,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 3,
        record: {
          id: 3,
          c_dzp64j57b0pm6b8clmddapump: 'test1',
          created_at: '2020-06-11T16:29:14.713Z',
          updated_at: '2020-06-11T18:15:24.949Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              'https://images.squarespace-cdn.com/content/v1/5a5906400abd0406785519dd/1552662149940-G6MMFW3JC2J61UBPROJ5/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/baelen.jpg?format=1500w',
            size: 5557,
            width: 275,
            height: 183,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 3,
          },
        },
      },
    },
    {
      id: 2,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 2,
        record: {
          id: 2,
          c_dzp64j57b0pm6b8clmddapump: 'test2',
          created_at: '2020-06-11T16:29:04.801Z',
          updated_at: '2020-06-11T18:15:07.995Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              '75dcb52136d892cf5fad9637f650231fae1f33599739a99678517bf959a07ae9.jpg',
            size: 7595,
            width: 284,
            height: 177,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 2,
          },
        },
      },
    },
    {
      id: 1,
      _meta: {
        datasourceId: '97578cbb11844a92914b7ed8eb174929',
        tableId: 't_0sspte5yfnottg3npjqxbf7k5',
        id: 1,
        record: {
          id: 1,
          c_dzp64j57b0pm6b8clmddapump: 'test3',
          created_at: '2020-06-11T16:28:59.989Z',
          updated_at: '2020-06-11T18:15:15.956Z',
          c_55pk7oxu728xufdeh6st6fplh: {
            url:
              'ec4bdfcb37766426fe5f22ee521556131233480f877f13c4c3716dca7c6a5d2b.jpg',
            size: 5503,
            width: 168,
            height: 300,
            filename: 'file.jpg',
          },
          _meta: {
            datasourceId: '97578cbb11844a92914b7ed8eb174929',
            tableId: 't_0sspte5yfnottg3npjqxbf7k5',
            id: 1,
          },
        },
      },
    },
  ];

  const slides = images.map((el, index) => (
    <img
      src={el._meta.record.c_55pk7oxu728xufdeh6st6fplh.url}
      alt={`Slide ${index + 1}`}
    />
  ));

  return (
    <div style={{width: '50%', margin: 'auto'}}>
      <Carousel>{slides}</Carousel>
    </div>
  );
}

【讨论】：