我想在一个旋转木马中呈现一个动态的图片列表。

Question

你好，Stack overflow社区，提前感谢你的帮助，我是一个相当新的反应native.对于这个项目，我已经导入库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}}}}]

我希望能够把这些数据中的urls放到carousel中，这是我现在的代码，目前是硬编码。图片的列表叫做图片

返回 (

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

所有的旋转木马的东西工作，但我需要能够把这些铀在旋转木马内，但当我已经尝试把一个循环的标签内，它打破了。

Answer 1

如果我的理解是正确的，你想映射数组，并返回一个图像.我会做这样的事情。

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

Answer 2

• 从对象中正确使用URL键
• 网址必须是一个正确的链接
• https:/codesandbox.iosthirsty-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>
  );
}